Angularjs中ng-select和ng-options用法【select聯動資料】
阿新 • • 發佈:2019-01-10
1、使用前景
最近在使用angualr專案中遇到select聯動資料,嘗試了很多次都失敗,終於在查找了很多資料以後解決了問題。
2、介紹ng-select
ng-select用來將資料同HTML的標籤進行繫結。這個指令可以和ng-model以及ng-options指令一起使用,構建精細且表現良好的動態表單。
ng-options的值可以是一個內涵表示式(comprehension
expression),其實這只是一種有趣的說法,簡單來說就是它可以接收一個數組或者物件,並對她們進行迴圈,將內部的內容提供給select標籤內部的選項。它可以是一下兩種形式。1、陣列作為資料來源
用陣列中的值做標籤。
用陣列中的值作為選中的標籤。
用陣列中的值做標籤組。
用陣列中的值作為選中的標籤組。
2、物件作為資料來源
用物件的鍵-值(key-value)做標籤。
用物件的鍵-值作為選中的標籤。
用物件的鍵-值作為標籤組。
用物件的鍵-值作為選中的標籤組。
3、例項
html程式碼
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
<head>
<title>select</title>
<script src="JS/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller('selectController', function ($scope) {
$scope.mycity = '北京';
$scope.Cities = [{ id: 1, name: '北京' }, { id: 2, name: '上海' }, { id: 3, name: '廣州' }];
});
</script>
</head>
<body>
<div ng-controller="selectController">
<select ng-model="mycity" ng-options="city for city in Cities"></select>
</div>
</body>
</html>
結果如下:
你會發現,上面的option中的text都是物件,這也很容易理解,因為cities陣列的每一項都是一個物件,繫結的時候將以物件直接繫結上。那麼我們如何只讓它顯示name屬性呢?
<div ng-controller="selectController">
<select ng-model="mycity" ng-options="city.name for city in Cities"></select>
</div>
直接點出屬性即可。再檢視下dom數。
值已經顯示出來,但是並不是太完美,因為第一項預設選中的竟然沒有值,那麼接下來我們指定預設值。
$scope.mycity = '北京';
加上這句程式碼,並不能解決問題,我們仍需修改ng-options
<select ng-model="mycity" ng-options="city.name as city.name for city in Cities"></select>
我們再檢視下dom
這樣就能解決這個問題啦~