2017-09-17 97 views
1

我是angularjs平台的新手,我面临的问题是解决我的雇主给出的一个小任务。我希望有一个人可以帮助我。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; 
      } 
     }); 
+0

感谢那仁先生。在我的函数中,我不知道如何从ng选项中获取选定的值。这是我的问题 –

回答

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>

+0

非常感谢你你是一个明星!这是我期望的100%。 –

+0

@KKSK谢谢,不客气! –