ユーザがhtmlページの値を入力した場合には、それに基づいて制御する必要があるボタンがあります。angular.jsのコントローラからの無効化ボタンを有効にします

モデルをテキストフィールドにバインドして、入力フィールドモデルの値で有効/無効になっている$ scopeで無効な変数を設定しました。ここで

はHTML

<!--This button should be disabled if no value is enterd in both the field--> 
    <input type='button' value='click' ng-disabled='disabled'> 
    <br> 
    <input type="text" ng-model="first"> 
    <br> 
    <input type="text" ng-model='last'>

であり、ここでcorreponding角度コントローラです。

angular.module('app', []).controller('myController', function($scope) { 

    $scope.disabled = !$scope.first || !$scope.last; 

})

初めて実行されますが、その後の変更に基づいて変更が表示されません。

角度は双方向バインディングを使用していますので、ビュー上で何かを変更している場合はコントローラに反映され、コントローラ上で変更されたものはビューに反映されます。私はここで何をしていますか？

PS：フォームを使用したくありません
テキスト入力フィールドでonChangeイベントを回避したいと思います。

plunk http://plnkr.co/edit/L5wkcpNzMMBZxtcitJwk?p=preview

出典

2016-11-17 Pankaj

使用ng-disabled='!first || !last'を試してみてくださいを参照してください。

次のロジックは、少なくともあなたのPlunkerで、動作しているようです：

<input type='button' value='click' ng-disabled='!first || !last'> 
<br> 
<input type="text" ng-model="first"> 
<br> 
<input type="text" ng-model='last'>

スコープの変数$scope.firstと$scope.lastは、コントローラに結合された双方向いることは事実です。これは、入力ボックスの変更がこれらの変数の状態に自動的に反映されることを意味します。しかし、disabledは計算量であり、これはコントローラーがロードされた時点で1回計算されますが、コード内では計算されません。したがって、両方の入力ボックスにテキストを入力した後でも、disabledは常にtrueと表示されます。

Plunker

出典

2016-11-17 07:46:26

感謝。 ng-changeが他の答えで示唆されているように機能することを確信しましたが、私が探す最後の手段になります。 – Pankaj

@Pankaj変更イベントの際に_other_ thingsをする必要があった場合は、Sajeetharanの答えを検討することができます。しかし、単純なケースでは、コントローラに余分なロジックを追加する必要はありません。 –

このアプローチでは、最初と最後ではなくn個のフィールドがあるので、ng-disabledの長い式が追加されます。これを実現するにはクリーンな方法がありますか？また、変更は最後の手段です – Pankaj

この

angular.module('app', []).controller('myController', function($scope) { 

    $scope.disabled = !$scope.first=="" || !$scope.last == ""; 

})

出典

2016-11-17 07:46:10

あなたは入力

angular.module('app', []).controller('myController', function($scope) { 
    $scope.change = function() { 
    $scope.disabled = !$scope.first || !$scope.last; 
    }  
})

HTML

<input type='button' value='click' ng-disabled='disabled'> 
    <br> 
    <input type="text" ng-change="change()" ng-model="first"> 
    <br> 
    <input type="text" ng-change="change()" ng-model='last'>

DEMO

出典

2016-11-17 07:48:15 Sajeetharan

、このいずれかを使用しての変化を検出することにより、これを行うことができます。私はそれが役に立てば幸い：私はplunkerを編集した

 $scope.disabled=($scope.first==""?true:($scope.last==""?true:false))

出典

2016-11-17 07:49:17

答えを説明できますか？何をしましたか、それはなぜ機能しますか？ – empiric

私は三元演算子を配置しました。最初のものが空であるかどうかを確認する場合は、最初に空であるかどうかを確認し、そうでない場合は最後にチェックします –

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
<div ng-app> 
 
<input type='button' value='click' ng-disabled='first.length==0||last.length==0||first==undefined||last==undefined'> 
 
    <br> 
 
    <input type="text" ng-model="first"> 
 
    <br> 
 
     <input type="text" ng-model='last'> 
 
</div>

出典

2016-11-17 07:52:55 Pravin

。それをチャックして教えてください。

JSコード：

angular.module('app',[]).controller('myController', function($scope){ 

    $scope.disabled = true; 

    $scope.func=function() { 
    $scope.disabled = true; 
    if($scope.first && $scope.last) { 
     $scope.disabled=false; 
    } 
    } 

})

HTMLコード：適切な説明をするための

<!DOCTYPE html> 
<html ng-app='app'> 

<head> 
    <script data-require="[email protected]" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
</head> 

<body ng-controller='myController'> 

    <!--This button should be disabled if no value is enterd in both the field--> 
    <input type='button' value='click' ng-disabled='disabled'> 
    <br> 
    <input type="text" ng-model="first" ng-change="func()"> 
    <br> 
    <input type="text" ng-model='last' ng-change="func()"> 
</body> 

</html>

出典

2016-11-17 07:54:40 Batman

angular.jsのコントローラからの無効化ボタンを有効にします

答えて

Plunker

関連する問題