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 相关文章推荐
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
Dec 25 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
jQuery实现点击行选中或取消CheckBox的方法
Aug 01 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 Javascript
webpack的 rquire.context用法实现工程自动化的方法
Feb 07 Javascript
Vue export import 导入导出的多种方式与区别介绍
Feb 12 Javascript
quickjs 封装 JavaScript 沙箱详情
Nov 02 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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
提升PHP执行速度全攻略
2006/10/09 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
php实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
django允许外部访问的实例讲解
2018/05/14 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
pygame实现打字游戏
2021/02/19 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
python 实现表情识别
2020/11/21 Python
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
Overload和Override的区别
2012/09/02 面试题
护理专业自荐信
2013/12/03 职场文书
医院辞职信范文
2014/01/17 职场文书
应届毕业生自荐信例文
2014/02/26 职场文书
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
MySQL创建定时任务
2022/01/22 MySQL