2015-10-05 31 views
0

我有一個數字文本框。 和另一個文本框列表。我想要的是,輸入的文本框值應與列表中輸入的值的總和進行比較。 我正面臨問題,因爲總價值是由自定義過濾器返回並以跨度顯示。比較angularjs中的值

任何人都可以請幫忙嗎?

這裏是Plunker

(function(angular) { 
 
    'use strict'; 
 
angular.module('myReverseFilterApp', []) 
 
    .filter('sumByKey', function() { 
 
      return function (data, key) { 
 
       if (typeof (data) === 'undefined' || typeof (key) === 'undefined') { 
 
        return 0; 
 
       } 
 

 
       var sum = 0; 
 
       for (var i = data.length - 1; i >= 0; i--) { 
 
        sum += isNaN(parseInt(data[i][key])) ? 0 : parseInt(data[i][key]); 
 
       } 
 

 
       return sum; 
 
      }; 
 
     }) 
 
    .controller('MyController', function($scope, $filter) { 
 
    
 
    $scope.valueArray = [{key:1, value:1}, 
 
    {key:2, value:2}, 
 
    {key:3, value:3}, 
 
    {key:4, value:4}, 
 
    {key:5, value:5}]; 
 
    
 
    $scope.arrayTotal = $filter('sumByKey')($scope.valueArray,'value'); 
 
    }); 
 
})(window.angular);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!doctype html> 
 
<html lang="en"> 
 

 

 

 
<body ng-app="myReverseFilterApp"> 
 
    <div ng-controller="MyController"> 
 
    Sample Value : <input ng-model="greeting" type="number"> 
 
    <hr> 
 

 
    <table> 
 
     <tr ng-repeat="item in valueArray"> 
 
     <td>{{item.key}}</td> 
 
     <td> 
 
      <input ng-model="item.value" /> 
 
     </td> 
 
     </tr> 
 
     <tfoot> 
 
     <tr> 
 
      <td>Total</td> 
 
      <td>{{arrayTotal}}</td> 
 
     </tr> 
 
     </tfoot> 
 
    </table> 
 
    </div> 
 
</body> 
 

 
</html>

+0

這是你想要的嗎? http://plnkr.co/edit/czT1oW8pUZ2tp9kTMtWy?p=preview – charlietfl

回答

0

這裏有一個plunkr:http://plnkr.co/edit/Jwnt98263xNgFYckeDNm?p=preview

我做了一個功能$scope.match,檢查總數和進入變量之間的平等。我也在頁面上添加了一個<p>元素以顯示結果。我還在函數中封裝了$scope.arrayTotal變量,以便在上面的框更改時更新。

0

由於我不確定你想達到什麼目的,我設計了以下兩個snipets,使用相同的過濾器checkForMatch來比較值。

第一個snipet比較各個列表值之間的值,第二個snipet將它們與這些值的總和進行比較。

該過濾器不是生產準備好的。有很多問題需要解決,但對於給定的信息,我相信這已經足夠了。

(function(angular) { 
 
    'use strict'; 
 
    angular.module('myReverseFilterApp', []) 
 
    .filter('sumByKey', function() { 
 
     return function(data, key) { 
 
     if (typeof(data) === 'undefined' || typeof(key) === 'undefined') { 
 
      return 0; 
 
     } 
 

 
     var sum = 0; 
 
     for (var i = data.length - 1; i >= 0; i--) { 
 
      sum += isNaN(parseInt(data[i][key])) ? 0 : parseInt(data[i][key]); 
 
     } 
 

 
     return sum; 
 
     }; 
 
    }) 
 
    .filter('checkForMatch', function() { 
 
     return function(input, value, greeting) { 
 
     if(value === greeting) 
 
     { 
 
      return 'Match!'; 
 
     } 
 
     return input; 
 
     }; 
 
    }) 
 
    .controller('MyController', function($scope, $filter) { 
 

 
     $scope.valueArray = [{ 
 
     key: 1, 
 
     value: 1 
 
     }, { 
 
     key: 2, 
 
     value: 2 
 
     }, { 
 
     key: 3, 
 
     value: 3 
 
     }, { 
 
     key: 4, 
 
     value: 4 
 
     }, { 
 
     key: 5, 
 
     value: 5 
 
     }]; 
 

 
     $scope.arrayTotal = $filter('sumByKey')($scope.valueArray, 'value'); 
 
     
 
    }); 
 
})(window.angular);
<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-app="myReverseFilterApp"> 
 
    <div ng-controller="MyController"> 
 
    Sample Value : <input ng-model="greeting" type="number"> 
 
    <hr> 
 

 
    <table> 
 
     <tr ng-repeat="item in valueArray"> 
 
     <td>{{item.value | checkForMatch : greeting}}</td> 
 
     <td> 
 
      <input ng-model="item.value" /> 
 
     </td> 
 
     </tr> 
 
     <tfoot> 
 
     <tr> 
 
      <td>Total</td> 
 
      <td>{{arrayTotal}}</td> 
 
     </tr> 
 
     </tfoot> 
 
    </table> 
 
    </div> 
 
</body> 
 

 
</html>

(function(angular) { 
 
    'use strict'; 
 
    angular.module('myReverseFilterApp', []) 
 
    .filter('sumByKey', function() { 
 
     return function(data, key) { 
 
     if (typeof(data) === 'undefined' || typeof(key) === 'undefined') { 
 
      return 0; 
 
     } 
 

 
     var sum = 0; 
 
     for (var i = data.length - 1; i >= 0; i--) { 
 
      sum += isNaN(parseInt(data[i][key])) ? 0 : parseInt(data[i][key]); 
 
     } 
 

 
     return sum; 
 
     }; 
 
    }) 
 
    .filter('checkForMatch', function() { 
 
     return function(input, greeting) { 
 
     if(input === greeting) 
 
     { 
 
      return 'Match!'; 
 
     } 
 
     return input; 
 
     }; 
 
    }) 
 
    .controller('MyController', function($scope, $filter) { 
 

 
     $scope.valueArray = [{ 
 
     key: 1, 
 
     value: 1 
 
     }, { 
 
     key: 2, 
 
     value: 2 
 
     }, { 
 
     key: 3, 
 
     value: 3 
 
     }, { 
 
     key: 4, 
 
     value: 4 
 
     }, { 
 
     key: 5, 
 
     value: 5 
 
     }]; 
 

 
     $scope.arrayTotal = $filter('sumByKey')($scope.valueArray, 'value'); 
 
     
 
    }); 
 
})(window.angular);
<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-app="myReverseFilterApp"> 
 
    <div ng-controller="MyController"> 
 
    Sample Value : <input ng-model="greeting" type="number"> 
 
    <hr> 
 

 
    <table> 
 
     <tr ng-repeat="item in valueArray"> 
 
     <td>{{item.value}}</td> 
 
     <td> 
 
      <input ng-model="item.value" /> 
 
     </td> 
 
     </tr> 
 
     <tfoot> 
 
     <tr> 
 
      <td>Total</td> 
 
      <td>{{arrayTotal | checkForMatch : greeting}}</td> 
 
     </tr> 
 
     </tfoot> 
 
    </table> 
 
    </div> 
 
</body> 
 

 
</html>