2017-02-07 8 views
0

私はこの種のプログラムを持っています。Angularjs - 値がng-repeat要素の値を超えた場合に送信ボタンを無効にする方法

var app = angular.module("myApp", []); 
 
app.controller("myCtrl", function($scope) { 
 
    $scope.records = [ 
 
    { 
 
     "Amt" : "500", 
 
     
 
    }, 
 
    { 
 
     "Amt" : "800", 
 
     
 
    }, 
 
    { 
 
     "Amt" : "1580", 
 
    }, 
 
    { 
 
     "Amt" : "1122", 
 
    } 
 
    ] 
 
    
 
    $scope.value=function(d, x) 
 
    { 
 
    x.balance = x.Amt - d; 
 
    if(d > x.Amt){ 
 
    $scope.isExceeded = true; 
 
    } else { 
 
    
 
    $scope.isExceeded = false; 
 
    } 
 
    } 
 
});
<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body ng-app="myApp"> 
 

 
<table ng-controller="myCtrl" border="1"> 
 
    <tr> 
 
    <td>Amt</td> 
 
    <td>Balance</td> 
 
    <td>Entered Amt</td> 
 
    <td ng-if="error"> Error</td> 
 
</tr> 
 
<tr ng-repeat="x in records"> 
 
    <td>{{x.Amt}}</td> 
 
    <td>{{x.balance}}</td> 
 
    <td><input type="text" ng-model="d" ng-change="value(d, x)"></td> 
 
    <td ng-if="d > x.Amt" ng-model="error">Please enter less than {{x.Amt}}</td> 
 
</tr> 
 
<tr> 
 
    <td colspan="4"><input type="button" value="Submit" ng-disabled="isExceeded"></td> 
 
</tr> 
 
</table> 
 

 
</body> 
 
</html>

私が欲しいのは、ボタンは任意の入力したAMTの各値は、AMTの値を超えた場合は無効になるはず提出しています。

私はこのタイプの条件をどのように達成することができないのか分かりません。私はangularjsの新しさです。

+0

使用NG-無効ディレクティブのような角度コントローラでそれをチェックして、私が何を望むかの条件 –

+0

その作業now.Itsを渡します。 – Mohammed

答えて

2

変数isExceededを使用し、ボタンを無効にするng-disableディレクティブの角マークで使用することができます。

<body ng-app="myApp"> 
    <table ng-controller="myCtrl" border="1"> 
    <tr> 
     <td>Amt</td> 
     <td>Balance</td> 
     <td>Entered Amt</td> 
     <td ng-if="error"> Error</td> 
    </tr> 
    <tr ng-repeat="x in records"> 
     <td>{{x.Amt}}</td> 
     <td>{{x.balance}}</td> 
     <td><input type="text" ng-model="d" ng-change="value(d, x)"></td> 
     <td ng-if="d > x.Amt" ng-model="error">Please enter less than {{x.Amt}}</td> 
    </tr> 
    <tr> 
     <td colspan="4" ng-disable="isExceeded"><input type="button" value="Submit"></td> 
    </tr> 
    </table>  
</body> 

$scope.value=function(d, x) 
{ 
    if(d > x.Amt){ 
    $scope.isExceeded = true; 
    } else { 
    x.balance = x.Amt - d; 
    $scope.isExceeded = false; 
    } 
} 
+0

チャンピオンのように働いた。 – Mohammed

+0

しかし、HTML自体でそれを行う他の方法はありませんか? – Mohammed

+0

はい、メソッドがあります。値を変更するための 'ng-repeat'の外に、現在のアイテムが必要です。インデックスを保存してから、現在のアイテムをHTMLで使用することができます。しかし、このようにするのはもっと簡単です –

関連する問題