ng-select ng-options ng-repeat的用法與區別

 

ng-options ng-repeat的用法

工做中總會遇到關於下拉選項的一些操做，可是常常會遇到一些問題，基本上都是如下問題：

- 下拉框使用ng-options和ng-repeat的區別
- 下拉框的默認選項的問題
- 下拉框的model值如何綁定
- 下拉框的禁用選項問題
- 下拉框的分組和排序的問題

 

ng-repeat和ng-options的用法 
ng-repeat是經過數組來循環HTML代碼來建立下拉列表，ng-repeat綁定到ngModel的值只能是字符串。 
ng-options的列表項能夠是對象和數組循環輸出，不少時候使用ng-options更方便。

(1)看一個數據的列表項是數組的例子：

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "Runoob", "Taobao"];
});
</script>

a. 使用ng-options循環數據:

<div ng-app="myApp" ng-controller="myCtrl">
    <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
    </select>
</div>

注意，這裏的ng-init能夠直接將下拉列表的第一個值設置爲默認值。

b. 使用ng-repeat循環數據：

<div ng-app="myApp" ng-controller="myCtrl">
    <select>
        <option ng-repeat="x in names">{{x}}</option>
    </select>
</div>

(2)數據的列表項是對象

$scope.sites = [
    {site : "Google", url : "http://www.google.com"},
    {site : "Runoob", url : "http://www.runoob.com"},
    {site : "Taobao", url : "http://www.taobao.com"}
];
$scope.selectedSite=$scope.sites[0];  //這一句直接將下拉列表的第一個值做爲默認值

a. 使用ng-repeat就會有侷限性，選擇的值只能是一個字符串:

<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>

<h1>你選擇的是: {{selectedSite}}</h1>

b. 使用ng-options選擇的值就是一個對象:

<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>

<h1>你選擇的是: {{selectedSite.site}}</h1>
<p>網址爲: {{selectedSite.url}}</p>

從上面兩個例子，能夠看出ng-options和ng-repeat的區別有如下幾個方面：
1. ng-options必定要和ng-model搭配，這裏的ng-model獲取的就是列表的一個對象。
ng-repeat的value值類型是string。
2. 設置首選項有兩個方法，ng-init和直接js賦值，也能夠添加一個未選中的選項：

<select ng-model="selectedSite" ng-options="x.site for x in sites">
    <option value="">-- 選擇一個地址 --</option>
</select>

 

關於ng-repeat的其餘用法

在實際的應用場景中，咱們須要一個表格來管理信息，這時候使用ng-repeat的$index能夠知道是哪一行被操做了。具體看一個例子：

<table>
    <tr ng-repeat="x in list">
        <td>{{x.name}}</td>
        <td><input type="button" value="我是第{{$index}}行的按鈕"
              ng-click="onClick($index)"></td>
    </tr>
</table>

$scope.onClick = function (index) {
    alert("點擊了第"+index+"行的按鈕");
};

要注意的是，$index是從0開始計算的。

 

ng-options的分組和排序的功能

(1) ng-options支持group by語法進行分組。

$scope.colors = [
    {name: '黑色', color: 'black', type: "暗色"},
    {name: '白色', color: 'white', type: "亮色"},
    {name: '紅色', color: 'red', type: "暗色"},
    {name: '藍色', color: 'blue', type: "暗色"},
    {name: '黃色', color: 'yellow', type: "亮色"}
];

<select ng-model="colorChosen" ng-options="color.name group by color.type for color in colors">

結果會根據「暗色」和「亮色」分組。
(2)ng-options支持orderBy過濾器對結果排序

<select ng-model="colorChosen" ng-options="color.name group by color.type for color in colors | orderBy:'name' ">
</select>

結果會根據「暗色」和「亮色」分組，在分組裏根據字符順序排序。

ng-options禁用某些選項

$scope.colors = [
    {name: '黑色', color: 'black', type: "暗色"},
    {name: '白色', color: 'white', type: "亮色", disabled: false},
    {name: '紅色', color: 'red', type: "暗色", disabled: true},
    {name: '藍色', color: 'blue', type: "暗色", disabled: false},
    {name: '黃色', color: 'yellow', type: "亮色", disabled: true}
];

<select ng-model="colorChosen"
        ng-options="color.name group by color.type
        disable when color.disabled for color in colors">