如何用ng指令選擇部分填充select？

我想添加多個選擇選項到已經有選項的選擇中。理想情況下，我可以確定這些額外選項的順序。如何用ng指令選擇部分填充select？

在以下從AngularJS:Select中調整的簡單示例中，包含未分配值的選項作爲附加選項包含在內。它允許這個額外的選項，並將其保持在選項列表的頂部。

<!doctype html> 
<html ng-app> 
<head> 
    <script data-require="[email protected]" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script> 
    <script src="script.js"></script> 
</head> 
<body> 
    <div ng-controller="MyCntrl"> 
     <select ng-model="color" ng-options="c.name for c in colors"> 
     <option value="">-- choose color --</option> 
     </select> 

     <hr/> 
     Currently selected: {{ {selected_color:color} }} 
    </div> 
</body> 
</html>

的script.js

function MyCntrl($scope) { 
    $scope.colors = [ 
    {name:'black'}, 
    {name:'white'}, 
    {name:'red'}, 
    {name:'blue'}, 
    {name:'yellow'} 
    ]; 
    $scope.color = $scope.colors[2]; // red 
}

雖然上面的例子的偉大工程，我想通過添加一些靜態的選擇，將做多一點點插入ng-options之後或之下的顯示，同時仍允許null或空值選項保持在插入的ng選項之上。

下面是一個僞代碼的想法，我在尋找：（Plunker version）

<!doctype html> 
<html ng-app> 
<head> 
    <script data-require="[email protected]" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script> 
    <script src="script.js"></script> 
</head> 
<body> 
    <div ng-controller="MyCntrl"> 
     <select ng-model="color" ng-options="c.name for c in colors"> 
     <option value="">-- choose color --</option> 
     <!-- ng-options get inserted here --> 

     <!-- additional static options below --> 
     <option value="grey">grey</option> 
     <option value="orange">orange</option> 
     </select> 

     <hr/> 
     Currently selected: {{ {selected_color:color} }} 
    </div> 
</body> 
</html>

的script.js

function MyCntrl($scope) { 
    $scope.colors = [ 
    {name:'black'}, 
    {name:'white'}, 
    {name:'red'}, 
    {name:'blue'}, 
    {name:'yellow'} 
    ]; 
    $scope.color = $scope.colors[2]; // red 
}

當我添加兩個靜態選項（ '灰色' 和 '橙色'）到第二個例子，他們不渲染。

任何想法如何做到這一點將不勝感激。

來源

2014-01-17 DrewShirts

在select中使用ngOptions可爲綁定提供更多的功能和靈活性。但是，如果您使用的是字符串值，則可以在選項標籤上使用ngRepeat來構建動態選項，並將其與靜態選項和空白選項混合使用。

查看updated plunker。

這裏有一個片段：

<select ng-model="color"> 
     <option value="">-- choose color --</option> 
     <!-- ng-options get inserted here --> 
     <option ng-repeat="c in colors" value="{{c.name }}">{{ c.name }}</option> 
     <!-- additional static options below --> 
     <option value="grey">grey</option> 
     <option value="orange">orange</option> 
    </select>

來源

2014-01-17 21:01:11

謝謝，這真是棒極了！無論如何，在ng-repeat選項名稱上按字母排序？ – DrewShirts

太好了。要按選項名稱排序，請在重複表達式中使用orderBy篩選器。 –

如何用ng指令選擇部分填充select？

回答

相關問題