模型数据（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双向绑定的更多相关文章

  1. Angularjs 双向绑定机制解析

    文章转自:http://www.2cto.com/kf/201408/327594.html AngularJs 的元素与模型双向绑定依赖于循环检测它们之间的值,这种做法叫做脏检测,这几天研究了一下其 ...

  2. AngularJS双向绑定，手动实施观察

    实现这样的一个需求:页面中某个地方显示某个文本框的值经过计算得到的结果,而且是文本框值每次变化显示的计算结果也跟着动态变化. 在controller中可以声明一个对象,它的一个字段用来存储初始值: $ ...

  3. angularJS双向绑定和依赖反转

    一.双向绑定: UI<-->数据 数据->UI (数据改变UI跟着变) UI->数据 (UI改变数据跟着变) 数据改变->UI改变原理: 监听数据是否改变,如果改变更新U ...

  4. AngularJs双向绑定详解

    双向绑定的三个重要方法: $scope.$apply() $scope.$digest() $scope.$watch() 一.$scope.$watch() 我理解的$watch就是将对某个数据的监 ...

  5. Angular系列----AngularJS入门教程05：双向绑定（转载）

    在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...

  6. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

  7. angularjs bind与model配合双向绑定 表达式方法输出

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  8. AngularJS学习笔记（三）数据双向绑定

    双向绑定 双向绑定是AngularJS最实用的功能,它节省了大量的代码,使我们专注于数据和视图,不用浪费大量的代码在Dom监听.数据同步上,关于双向更新,可看下图: 下面,我们通过代码来实现.先不要纠 ...

  9. AngularJS入门讲解2：过滤器和双向绑定

    我们在上一课做了很多基础性的训练,接下来,我们讲一些难点的知识点,首先,讲一下如何实现一个全文检索功能: <html ng-app> <head> ... <script ...

随机推荐

  1. NODE升级到V12.X.X

    Node.js 是一个基于Chrome JavaScript运行时的平台,可轻松构建快速,可扩展的网络应用程序.最新版本 node.js yum存储库 由其官方网站维护.使用本教程添加yum存储库,并 ...

  2. ajax传递对象到MVC控制器

    1.view层中ajax写法: function Add2() { var model = new Object(); model.UserName = $('#UserName').val(); m ...

  3. Python_007(深浅拷贝)

    一.基础数据类型的补充 1.其他类型之间的相互转换 例如:str = int(str) str => int; int = list(int) int => list;  tuple = ...

  4. 前端面试之路之HTML面试真题

    1.doctype的意义是什么 让浏览器以标准模式渲染 让浏览器知道元素的合法性 2.HTML XHTML HTML5的关系 HTML属于SGML XHTML属于XML,是HTML进行XML严格化的结 ...

  5. Vue+webpack+Element 兼容问题总结

    项目中用到了Vue.js和Elenment-UIVue官方文档中给出明确范围:Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性.但它支持所有 ...

  6. Cookie由谁设置、怎么设置、有什么内容？

    Cookie是由服务器生成,保存在客户端本地的一个文件,通过response响应头的set-Cookie字段进行设置,下面是一个示例: Cookie包含什么信息? 它可以记录你的用户ID.密码.浏览过 ...

  7. 洛谷P1288 取数游戏II（博弈）

    洛谷P1288 取数游戏II 先手必胜的条件需要满足如下中至少 \(1\) 条: 从初始位置向左走到第一个 \(0\) 的位置,经过边的数目为偶数(包含 \(0\) 这条边). 从初始位置向右走到第一 ...

  8. ANTLR4 实验总结

    问题总结: 1.不同类型编程语言之间转换的意义. 仅仅的字符替换?结构 2.编程语言转换的困难. 优先级:++运算符 不同语言有各自的优越性(Scala转C遇到困难) 编程思想冲突. 3.单纯应用在数 ...

  9. PHP不使用内置函数intval()，实现字符串转整数

    平时我们用PHP时,将字符串转化为整型时,一般都是使用 intval() 内置函数,那么如果我们自己写,怎么写一个呢? 此时我们可以利用 ASCII 码计算得整数的特性,因为每个字符都对应一个 ASC ...

  10. SqlSession 内部运行

    <深入浅出MyBatis技术原理与实战>p150页 SqlSession内部运行图 四大对象在流程中的操作. 1.准备sql.StatementHandler 的prepare方法进行sq ...