AngularJs双向绑定

模型数据（Data）

　　模型是从AngularJS作用域对象的属性引申的。模型中的数据可能是Javascript对象、数组或基本类型，这都不重要，重要的是，他们都属于AngularJS作用域对象。

　　AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变，AngularJS会立即刷新反映在视图界面中，反之亦然。

示例：

html

 <!DOCTYPE html>

 <html>

 <head>

 <script src="http://cdn.bootcss.com/angular.js/1.4.0-rc.1/angular.min.js"></script>

   <meta charset="utf-8">

   <title>AnjularJs</title>

 </head>

 <body ng-app="page" ng-controller="phoneList">

 <!--ng-model start-->

   <div class="contianer">

   <h3>输入：{{query}}</h3>

   搜索：<input type="text" ng-model="query"></br>

   选择1：<select ng-model="query1" ng-options="v.val as v.name for v in option">

     <option value="">请选择</option>

   </select></br>

   选择2：<select ng-model="query2">

     <option value="0">0</option>

     <option value="1">1</option>

     <option value="2">2</option>

   </select></br>

   排序：<select ng-model="orderProp">

           <option value="name" selected>name</option>

           <option value="age">age</option>

        </select>

     <ul class="phones">

       <li ng-repeat="phone in phones|filter:query|filter:query1|orderBy:orderProp">

         {{phone.name}}

         <p>

           {{phone.snippet}}

         </p>

       </li>

     </ul>

 </div>

 <!--ng-model end-->

 <!--ng-options start-->

 <div class="opt">

 基本：<select ng-model="selectLunch" ng-options="lunch.name for lunch in lunches">

     <option value="">请选择</option>

 </select></br>

 自定：<select ng-model="selectLunch" ng-options="(lunch.name + ' (' + lunch.side_dish + ')') for lunch in lunches">

     <option value="">请选择</option>

 </select></br>

 自定value：<select ng-model="selectLunch" ng-options="lunch.name for lunch in lunches track by lunch.price">

     <option value="">请选择</option>

 </select>

 <p>{{selectLunch}}</p>

 加入optgroup 分类：<select ng-model="selectLunch" ng-options="lunch.name group by lunch.category for lunch in lunches track by lunch.price">

     <option value="">请选择</option>

 </select>

 <p>{{selectLunch}}</p>

 <!--ng-options end-->

 </div>

 </body>

 </html>

css

 div{border:3px solid #ccc;padding:10px;margin-top:10px;}

 h3{color:#888;padding:;margin:0 0 5px 0;}

 p{color:red}

javascript

 var app = angular.module('page', []);

 app.controller('phoneList', function($scope) {

   //模型变量

   $scope.phones = [{"name": "Nexus S",

      "snippet": "Fast just got faster with Nexus S.",

      "age": 0},

     {"name": "Motorola XOOM™ with Wi-Fi",

      "snippet": "The Next, Next Generation tablet.",

      "age": 1},

     {"name": "MOTOROLA XOOM™",

      "snippet": "The Next, Next Generation tablet.",

      "age": 2}];

   $scope.orderProp = "age";

   $scope.option = [

     {"val":0,"name":"－0－"},

     {"val":1,"name":"－1－"},

     {"val":2,"name":"－2－"}

   ];

   $scope.query1 = "";

   $scope.query2 = "0";

   //select分组

   $scope.lunches = [

     {

         name: 'Hamburger',

         side_dish: 'Corn Soup',

         category: 'Food',

         price: 50

     },

     {

         name: 'Rice',

         side_dish: 'Egg',

         category: 'Food',

         price: 80

     },

     {

         name: 'Pork',

         side_dish: 'Black Tea',

         category: 'Food',

         price: 100

     },

     {

         name: 'Shit',

         side_dish: 'Dog',

         category: 'Garbage',

         price: 10

     }

 ];

 });

巴特西

AngularJs双向绑定

模型数据（Data）

最新文章

热门文章