Android教程網 >> Android技術 >> 關於Android編程 >> [Angularjs]ng-select和ng-options

[Angularjs]ng-select和ng-options

編輯：關於Android編程

最近由於項目需要，學了一段時間的angularjs，發現還是比較容易上手的，裡面有很多地方，的確震撼了自己。這裡就簡單的介紹一下angularjs中ng-select和ng-options的用法。 ng-select ng-select用來將數據同HTML的<select>標簽進行綁定。這個指令可以和ng-model以及ng-options指令一起使用，構建精細且表現良好的動態表單。 ng-options的值可以是一個內涵表達式（comprehension expression），其實這只是一種有趣的說法，簡單來說就是它可以接收一個數組或者對象，並對她們進行循環，將內部的內容提供給select標簽內部的選項。它可以是一下兩種形式。 1、數組作為數據源用數組中的值做標簽。用數組中的值作為選中的標簽。用數組中的值做標簽組。用數組中的值作為選中的標簽組。 2、對象作為數據源用對象的鍵-值（key-value）做標簽。用對象的鍵-值作為選中的標簽。用對象的鍵-值作為標簽組。用對象的鍵-值作為選中的標簽組。一個例子

<!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>

查看一下dom 你會發現，上面的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 ng-options有以下格式的語法 for array data sources: label for value in array select as label for value in array label group by group for value in array select as label group by group for value in array track by trackexpr for object data sources: label for (key , value) in object select as label for (key , value) in object label group by group for (key, value) in object select as label group by group for (key, value) in ob 在看一個分組的例子，為cities數組加上group屬性，並按照group分組：

<!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: '北京', group: '中國' }, { id: 2, name: '上海', group: '中國' }, { id: 3, name: '廣州',group:'中國' }];
        });
    </script>
</head>
<body>
    <div ng-controller="selectController">
        <select ng-model="mycity" ng-options="city.name as city.name group by city.group for city in Cities"></select>
    </div>
</body>

結果雙向綁定這裡已經指定了ng-model，獲取選中的值，也非常方便了。

<!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: '北京', group: '中國' }, { id: 2, name: '上海', group: '中國' }, { id: 3, name: '廣州', group: '中國' }];
        });
    </script>
</head>
<body>
    <div ng-controller="selectController">
        <select ng-model="mycity" ng-options="city.name as city.name group by city.group for city in Cities"></select>
        <h1>歡迎來到{{mycity}}</h1>
    </div>
</body>
</html>

上一頁:android之LruCache源碼解析
下一頁:Android生猛上手，先寫個撥號器。

關於Android編程

Android編程入門 Android技術基礎 Android資訊關於Android編程 Android開發 Android開發環境 Android開發實例

相關文章