AngularJs双向绑定
模型数据（Data）
模型是从AngularJS作用域对象的属性引申的。模型中的数据可能是Javascript对象、数组或基本类型，这都不重要，重要的是，他们都属于AngularJS作用域对象。
AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变，AngularJS会立即刷新反映在视图界面中，反之亦然。
示例：
html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="http://cdn.bootcss.com/angular.js/1.4.0-rc.1/angular.min.js"></script> 5 <meta charset="utf-8"> 6 <title>AnjularJs</title> 7 </head> 8 <body ng-app="page" ng-controller="phoneList"> 9 <!--ng-model start--> 10 <div class="contianer"> 11 <h3>输入：{{query}}</h3> 12 搜索：<input type="text" ng-model="query"></br> 13 选择1：<select ng-model="query1" ng-options="v.val as v.name for v in option"> 14 <option value="">请选择</option> 15 </select></br> 16 选择2：<select ng-model="query2"> 17 <option value="0">0</option> 18 <option value="1">1</option> 19 <option value="2">2</option> 20 </select></br> 21 排序：<select ng-model="orderProp"> 22 <option value="name" selected>name</option> 23 <option value="age">age</option> 24 </select> 25 <ul class="phones"> 26 <li ng-repeat="phone in phones|filter:query|filter:query1|orderBy:orderProp"> 27 {{phone.name}} 28 <p> 29 {{phone.snippet}} 30 </p> 31 </li> 32 </ul> 33 </div> 34 <!--ng-model end--> 35 <!--ng-options start--> 36 <div class="opt"> 37 基本：<select ng-model="selectLunch" ng-options="lunch.name for lunch in lunches"> 38 <option value="">请选择</option> 39 </select></br> 40 自定：<select ng-model="selectLunch" ng-options="(lunch.name + ' (' + lunch.side_dish + ')') for lunch in lunches"> 41 <option value="">请选择</option> 42 </select></br> 43 自定value：<select ng-model="selectLunch" ng-options="lunch.name for lunch in lunches track by lunch.price"> 44 <option value="">请选择</option> 45 </select> 46 <p>{{selectLunch}}</p> 47 加入optgroup 分类：<select ng-model="selectLunch" ng-options="lunch.name group by lunch.category for lunch in lunches track by lunch.price"> 48 <option value="">请选择</option> 49 </select> 50 <p>{{selectLunch}}</p> 51 <!--ng-options end--> 52 </div> 53 </body> 54 </html>
css
1 div{border:3px solid #ccc;padding:10px;margin-top:10px;} 2 h3{color:#888;padding:0;margin:0 0 5px 0;} 3 p{color:red}
javascript
1 var app = angular.module('page', []); 2 app.controller('phoneList', function($scope) { 3 //模型变量 4 $scope.phones = [{"name": "Nexus S", 5 "snippet": "Fast just got faster with Nexus S.", 6 "age": 0}, 7 {"name": "Motorola XOOM™ with Wi-Fi", 8 "snippet": "The Next, Next Generation tablet.", 9 "age": 1}, 10 {"name": "MOTOROLA XOOM™", 11 "snippet": "The Next, Next Generation tablet.", 12 "age": 2}]; 13 $scope.orderProp = "age"; 14 $scope.option = [ 15 {"val":0,"name":"－0－"}, 16 {"val":1,"name":"－1－"}, 17 {"val":2,"name":"－2－"} 18 ]; 19 20 $scope.query1 = ""; 21 $scope.query2 = "0"; 22 //select分组 23 $scope.lunches = [ 24 { 25 name: 'Hamburger', 26 side_dish: 'Corn Soup', 27 category: 'Food', 28 price: 50 29 }, 30 { 31 name: 'Rice', 32 side_dish: 'Egg', 33 category: 'Food', 34 price: 80 35 }, 36 { 37 name: 'Pork', 38 side_dish: 'Black Tea', 39 category: 'Food', 40 price: 100 41 }, 42 { 43 name: 'Shit', 44 side_dish: 'Dog', 45 category: 'Garbage', 46 price: 10 47 } 48 ]; 49 50 });
