模型数据(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. python学习笔记(八)函数return多个值,列表推导式和交换两个变量的值

    函数return多个值: 补充知识点:写代码得到时候少用全局变量: 1.不安全 2.会一直占着内存不释放 函数多个return值,那么会把这几个return的值都放在一个元组里面,然后返回 def h ...

  2. 10:基于Tomcat部署Web工程

    1创建目录, 2.标识目录java文件,资源文件

  3. Python3解leetcode Subtree of Another Tree

    问题描述: Given two non-empty binary trees s and t, check whether tree t has exactly the same structure ...

  4. php str_word_count()函数 语法

    php str_word_count()函数 语法 作用:计算字符串中的单词数.大理石平规格 语法:str_word_count(string,return,char) 参数: 参数 描述 strin ...

  5. JS大文件上传解决方案

    1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...

  6. 《数据结构与算法(C语言版)》严蔚敏 | 第五章 建立二叉树,并完成三/四种遍历算法

    PS:所有的代码示例使用的都是这个图 2019-10-29 利用p126的算法5.3建立二叉树,并完成三种遍历算法 中序 后序 先序 #include<iostream> #include ...

  7. undo管理

    undo segments的extents 的状态共有四种,free ,active , inacitve, expired  SQL> select SEGMENT_NAME,TABLESPA ...

  8. python比C程序相比非常慢

    w http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/001374738136930 ...

  9. 如何正确安装Mysql

    1.官网去下载 2.针对操作系统的不同下载不同的版本  安装步骤: 第一步解压文件:位置为你想要安装的盘符第二步加载环境变量加载的是bin目录第三步初始化:在cmd终端中输入 mysqld --ini ...

  10. log4j配置及异常、解决办法

    配置: ### set log levels ### D只有一个E也只有一个 log4j.rootLogger = debug,stdout,D,E ### 输出到控制台 ### log4j.appe ...