Angular.js回顾ng-app和ng-model使用技巧


Posted in Javascript onApril 26, 2016

Angular.js中index.html简单结构:

<!doctype html> 
<html ng-app> 
  <head> 
    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> 
  </head> 
  <body> 
    Your name: <input type="text" ng-model="yourname" placeholder="World"> 
    <hr> 
    Hello {{yourname || 'World'}}! 
  </body> 
</html>

ng-app属性是angular.js的标志语句,它标记了angular.js的作用域。ng-app可以添加在很多地方,像上面那样添加到html标签上,说明angular脚本对整个页面都起作用。也可以在局部添加ng-app属性,比如在某一个div内添加ng-app,则表明接下来的整个div区域使用angular脚本解析,而其他位置则不适用angular脚本解析。
ng-model表示建立一个数据模型。这里在input输入姓名的输入框内,我们把该定义了一个yourname数据模型。定义了该模型后,我们可以在下面进行调用,方法是利用{{}}。这样就完成了数据绑定,当我们在输入框内输入内容时,会同步到下面的Hello语句块中。
ng-model定义的数据模型不仅可以用于上述场景,还能在许多情况下得到广泛应用。
1、设置filter,实现搜索功能
在下面的代码中,我们利用一个简单的数据模型定义+filter就可以完成一个列表搜索功能。(这是中文网上的实例代码,先不需要管不清楚的部分)

<div class="container-fluid"> 
 <div class="row-fluid"> 
  <div class="span2"> 
   Search: <input ng-model="query"> 
  </div> 
  <div class="span10"> 
   <ul class="phones"> 
    <li ng-repeat="phone in phones | filter:query"> 
     {{phone.name}} 
    <p>{{phone.snippet}}</p> 
    </li> 
   </ul> 
    </div> 
 </div> 
</div>

 上述代码中,为搜索框的input标签绑定了数据模型query。这样,用户输入的信息会被同步到query数据模型中。在下面的li中,使用filter:query就可以实现列表中的数据过滤功能,按照用户的输入信息进行filter过滤。
2、设置orderBy,实现列表排序功能
在下面的代码中,与filter同理,使用orderBy为列表添加一个排序功能:

Search: <input ng-model="query"> 
Sort by: 
<select ng-model="orderProp"> 
 <option value="name">Alphabetical</option> 
 <option value="age">Newest</option> 
</select> 
<ul class="phones"> 
 <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"> 
  {{phone.name}} 
  <p>{{phone.snippet}}</p> 
 </li> 
</ul>

以上就是关于ng-app和ng-model使用技巧,温故知新,希望大家从中可以有所收获。

Javascript 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
JS处理VBArray的函数使用说明
May 11 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
js数组操作学习总结
Nov 04 Javascript
Javascript call和apply区别及使用方法
Nov 14 Javascript
jquery获取多个checkbox的值异步提交给php
Jul 07 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
Sep 23 Javascript
JavaScript RegExp 对象用法详解
Sep 24 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 #Javascript
Bootstrap网格系统详解
Apr 26 #Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 #Javascript
Bootstrap按钮组件详解
Apr 26 #Javascript
Bootstrap每天必学之警告框插件
Apr 26 #Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 #Javascript
jQuery 中的 DOM 操作
Apr 26 #Javascript
You might like
PHP几个数学计算的内部函数学习整理
2011/08/06 PHP
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
PHP的简易冒泡法代码分享
2012/08/28 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
ExpressJS入门实例
2015/01/14 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
微信小程序实现图片上传功能
2018/05/28 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
Python网络爬虫实例讲解
2016/04/28 Python
Python 性能优化技巧总结
2016/11/01 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
python logging.info在终端没输出的解决
2020/05/12 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
PyQt实现计数器的方法示例
2021/01/18 Python
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
台湾旅游网站:灿星旅游
2018/10/11 全球购物
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
《会变的花树叶》教学反思
2014/02/10 职场文书
工作睡觉检讨书
2014/02/25 职场文书
团队激励口号
2014/06/06 职场文书
处级干部考察材料
2014/12/24 职场文书
爱心募捐通知范文
2015/04/27 职场文书
功夫熊猫观后感
2015/06/10 职场文书