按属性的属性筛选ngOptions

Filtering ngOptions by properties of an attribute

本文关键字：属性 ngOptions 筛选      更新时间：2023-09-26

我有这个代码：

//sample of data.
var combobox = new[] { 
                new { Key = 1, Value = "a[del]", isDelegate = true }, 
                new { Key = 2, Value = "b[del]", isDelegate = true }, 
                new { Key = 3, Value = "c", isDelegate = false },
                new { Key = 4, Value = "d", isDelegate = false },
                new { Key = 5, Value = "e[del]", isDelegate = true }
            };
<select ng-model="selectedFilter" id="selectedFilter"
              ng-options="item.Key as item.Value for item in ComboBox 
               track by item.Key" ng-change="loadData()">
    <option>--</option>
</select>

我正在尝试将ng-if添加到选项中，以获得如下结果：

<select ng-model="selectedFilter" id="selectedFilter"
       ng-options="item.Key as item.Value for item in ComboBox track by item.Key" ng-change="loadData()">
    <option value="item.Key" ng-if="item.isDelegate">{{item.Value}}</option>
</select>

您可以使用过滤器

var app = angular.module('my-app', [], function() {
})
app.controller('AppController', function($scope) {
  $scope.condition = {
    isDelegate: true
  }
  $scope.combobox = [{
    Key: 1,
    Value: "a[del]",
    isDelegate: true
  }, {
    Key: 2,
    Value: "b[del]",
    isDelegate: true
  }, {
    Key: 3,
    Value: "c",
    isDelegate: false
  }, {
    Key: 4,
    Value: "d",
    isDelegate: false
  }, {
    Key: 5,
    Value: "e[del]",
    isDelegate: true
  }];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app" ng-controller="AppController">
  <select ng-model="selectedFilter" id="selectedFilter" ng-options="item.Key as item.Value for item in combobox | filter:condition track by item.Key" ng-change="loadData()">
    <option value="item.Key" ng-if="item.isDelegate">{{item.Value}}</option>
  </select>
</div>

我已经使用ng repeat完成了这项工作。

 <select ng-model="val2" id="selectedFilter"
                   >
                <option value="item.Key"  ng-repeat="item in combobox" ng-  
  if="item.isDelegate">{{item.Value}}</option>
            </select>

检查样本代码

Filter是一个选项，如果您不想用isDelegate显示选项=是的。

ng-options="item.Key as item.Value for item in ComboBox track by item.Key | filter: {isDelegate: true}"

但是，如果你想在选择列表中显示该选项为禁用，这样用户就无法选择它，请使用这个

<select ng-model="selectedFilter" id="selectedFilter" ng-change="loadData()">
  <option ng-repeat="item in ComboBox" value="{{item.Key}}" ng-disabled="!item.isDelegate">{{item.Value}}</option>
</select>
相关文章：