2014-10-31 172 views
0

我有這樣的代碼:過濾ngOptions通過屬性的屬性

//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> 
+0

這只是一個樣本。數據來自C# – AFetter 2014-10-31 04:51:36

+0

不幸的是,我不知道給ng-options一個模板的方法。 – Sacho 2014-10-31 04:52:50

+0

添加'|過濾器:{isDelegate:true}'在ng-options結尾,像這樣:ng-options =「item.Key as item.Value for item in ComboBox track by item.Key | filter:{isDelegate:true}」' – aarosil 2014-10-31 04:53:27

回答

1

您可以使用過濾器

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>

0

我已經完成了這個使用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> 

檢查Sample code

0

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>