模型数据（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:;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.  });

　　

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. html中的点击事件

    使用点击事件写一个计数器. onmouseup : 当鼠标按下,松开的时候触发事件. onmousedown: 当鼠标按下的时候触发事件.onMouseOver: 鼠标经过时触发 onMouseOut ...

  2. URL跳转漏洞

    URL跳转原理: 由于越来越多的需要和其他第三方应用交互,以及在自身应用内部根据不同的逻辑将用户引向到不同的页面,譬如一个典型的登录接口就经常需要在认证成功之后将用户引导到登录之前的页面,整个过程中如 ...

  3. 数组与List互转的坑

    一.数组转List 非原始类型的数组转List有很多种方式:假设有Integer[] arr = {"a", "b", "c"}; 1.Li ...

  4. 2018 ACM-ICPC 中国大学生程序设计竞赛线上赛 D Merchandise (斜率优化)

    Description: The elderly aunts always like to look for bargains and preferential merchandise. Now th ...

  5. 大白话vue——slot的作用与使用

    这篇内容本来是不打算放在首页上的,因为内容实在是比较简单,但是在查找slot的使用讲解时发现相关的讲解比较少,要么像官方文档一样简单讲解(看过任然一脸懵逼),也许是自己理解能力比较差...所以在此讲述 ...

  6. Ckeditor IE下粘贴word中图片问题

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  7. [CF959C]Mahmoud and Ehab and the wrong algorithm

    解法 很简单对于n<=5举不出反例 如果n>5的话2,3,4好点连1,其他点连2 对于正面例子 直接所有点连1号点 其实就是结论题 代码: #include <cstdio> ...

  8. 20180805-Java DataInputStream类

    DataInputStream dis = DataInputStream(InputStream in); 下面的例子演示了DataInputStream和DataOutputStream的使用,该 ...

  9. CTF_知识点网址收藏

    杂项 图片 python lsb.py extract big.png-stego.png3.txt详解 : https://www.4hou.com/technology/2515.html  :h ...

  10. 【运维】使用FileZilla搭建FTP服务器

    一.下载Filezilla  Server 官网网址:https://filezilla-project.org 二.安装Filezilla  Server   Filezilla  Server的安 ...