基于属性的 ng-options 过滤

Question

基本上我是 java 开发人员，最近转向使用 javascript(AngularJs) 进行编码，所以我对 javascript/AngularJS 完全陌生。当我编码时，我遇到了一个案例，如果我必须展示如前所述：一组水果 only/Vegetables 仅或两者都基于下拉选择我目前正在做的是有一个 "fruitNVeg " 数组，它包含所有项目并有一个临时变量 "currentItems"它在任何情况下都会根据所选项目过滤掉所需的项目，例如 Fruit only/Vegtable only/both。

现在我的问题是有什么方法可以让我在 HTML 中使用 "fruitNVeg" 本身，并只显示 "show" 属性设置为 true 的项目。即，在不使用额外变量 "currentItems" 的情况下获得相同的功能。

如果可能的话，请根据行数优化我当前的逻辑我受够了到处创建 2 个数组（完整+过滤）:-(

FruitsController.js
     $scope.fruitNVeg = [
                       { id : 1, name : "mango" , show : true , cat : "F"},
                       { id : 2, name : "orange", show : true , cat : "F"},
                       { id : 3, name : "tomato", show : true , cat : "F"},
                       { id : 4, name : "brinjal",show : false , cat : "V"},  
                       { id : 4, name : "potato", show : false , cat : "V"},
                       { id : 4, name : "ginger", show : false , cat : "V"}, 
                       ];

   $scope.selectList = [ 
                         {id:1, name  : "Fruits Only" },
                         {id:2, name  : "Vegetable Only" },
                         {id:3, name  : "Fruits & Vegetable" },
                        ];
    $scope.selectedItem = $scope.selectList[0];                  
    $scope.currentItems = angular.copy($scope.fruitNVeg,$scope.currentItems);
    $scope.selItem = $scope.currentItems[0];

    $scope.onChangeSelecList = function (){
        if(selectedItem.name == "Fruits Only"){
           //Use $filter to populate $scope.currentItems  with fruits only items
        } else if(selectedItem.name == "Vegetable Only"){
          //Use $filter to populate $scope.currentItems  with vegetables only items
        } else {
           $scope.currentItems = angular.copy($scope.fruitNVeg,$scope.currentItems);
        }
        $scope.selItem = $scope.currentItems[0];
    };

FruitDemo.Html
     <label> Please Select what to show <label>
     <select ng-model="selectedItem" ng-options="list.name for list in selectList" ng-change="onChangeSelecList()" name="listDropDown" id="listDropDown"></select>
     <select ng-model="selItem" ng-options="item.name for item in currentItems"  name="itemDropDown" id="itemDropDown"></select>

Answer 1

您可以查看所选选项并相应地更改 currentItem list.ngChange 表达式用于评估输入值的变化，而不是选项值的变化。

$scope.$watch("selectedItem", function(i) {
  $scope.currentItems.length = 0;
  if (i.id === 1) {
    angular.forEach($scope.fruitNVeg, function(val, key) {
      if (val.cat === 'F') {
        $scope.currentItems.push(val);
      }
    });
  } else if (i.id === 2) {
    angular.forEach($scope.fruitNVeg, function(val, key) {
      if (val.cat === 'V') {
        $scope.currentItems.push(val);
      }
    });
  } else {
    $scope.currentItems = $scope.fruitNVeg;
  }
  $scope.selItem = $scope.currentItems[0];
});

Jsfiddle Example

基于属性的 ng-options 过滤

ng-options filtering based on a property

javascript

angularjs

ng-options

基于 属性 的 ng-options 过滤

ng-options filtering based on a property

javascript

angularjs

ng-options

基于属性的 ng-options 过滤