angularjs比較運算符函數

Question

我是angularjs平臺的新手，我面臨的問題是解決我的僱主給出的一個小任務。我希望有一個人可以幫助我。

我有一套員工表，我需要在ng-option中使用比較運算符，然後在數字字段中輸入數字來獲得結果。 （例如，如果用戶選擇大於ng選項並在文本字段中輸入'50'，結果應該從數據表中篩選出年齡大於50的年齡任何人都可以幫忙請參考！

這就是我試圖

$scope.operators = [ 
      { 
       field: "gt" 
       title: ">" 
       } 
       , { 
       field: "lt" 
       title: "<" 
       } 
       , { 
       field: "et" 
       title: "=" 
       } 
      ]; 
     $scope.selected = $scope.operators[0]; 
     app.filter('priceGreaterThan', function() { 
      return function (input, price) { 
       var output = []; 
       if (isNaN(price)) { 
        output = input; 
       } 
       else { 
        angular.forEach(input, function (item) { 
         if (item.redemptions > price) { 
          output.push(item) 
         } 
        }); 
       } 
       return output; 
      } 
     }); 

Answer 1

嗨，你可以使用過濾器來完成所有的三個操作！請參考下面的示例代碼。

你的過濾器的偉大工程，我加入if else條件做不同的操作，還創建了一個用於顯示輸出的表格，因此不是將價格單獨傳遞給過濾器，而是傳遞一個對象（{price: price, operator: selected.field}），然後在濾波器內部使用，以獲取價格和運營商，請檢查我的代碼，並讓我知道是否有任何問題。

var app = angular.module('myApp', []); 
 

 
app.controller('MyController', function MyController($scope) { 
 
    $scope.data = [{ 
 
    name: 1, 
 
    redemptions: 100 
 
    }, { 
 
    name: 1, 
 
    redemptions: 150 
 
    }, { 
 
    name: 1, 
 
    redemptions: 200 
 
    }, { 
 
    name: 1, 
 
    redemptions: 50 
 
    }, { 
 
    name: 1, 
 
    redemptions: 1 
 
    }, { 
 
    name: 1, 
 
    redemptions: 10 
 
    }] 
 
    $scope.operators = [{ 
 
    field: "gt", 
 
    title: ">" 
 
    }, { 
 
    field: "lt", 
 
    title: "<" 
 
    }, { 
 
    field: "et", 
 
    title: "=" 
 
    }]; 
 
    $scope.selected = $scope.operators[0]; 
 
}); 
 

 
app.filter('priceGreaterThan', function() { 
 
    return function(input, params) { 
 
    var output = []; 
 
    if (isNaN(params.price)) { 
 
     output = input; 
 
    } else { 
 
     angular.forEach(input, function(item) { 
 
     if (params.operator === "gt") { 
 
      if (item.redemptions > params.price) { 
 
      output.push(item); 
 
      } 
 
     } else if (params.operator === "lt") { 
 
      if (item.redemptions < params.price) { 
 
      output.push(item); 
 
      } 
 
     } else { 
 
      if (item.redemptions == params.price) { 
 
      output.push(item); 
 
      } 
 
     } 
 
     }); 
 
    } 
 
    return output; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-controller='MyController' ng-app="myApp"> 
 
    <input type="text" ng-model="price"> 
 
    <select name="operator" id="test" ng-model="selected" ng-options="x as x.title for x in operators"></select> 
 
    <table border="1"> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Redemptions</th> 
 
    </tr> 
 
    <tr ng-repeat="j in data | priceGreaterThan: {price: price, operator: selected.field}"> 
 
     <td>{{j.name}}</td> 
 
     <td>{{j.redemptions}}</td> 
 
    </tr> 
 
    </table> 
 
</div>