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 事件执行检测代码
Dec 09 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
jQuery添加删除DOM元素方法详解
Jan 18 Javascript
Angular.js如何从PHP读取后台数据
Mar 24 Javascript
JQuery validate插件验证用户注册信息
May 11 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
Jun 11 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下使用无限生命期Session的方法
2007/03/16 PHP
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
PHP 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
php产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
JavaScript手机振动API
2016/06/11 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
Python实现批量下载文件
2015/05/17 Python
Python的多态性实例分析
2015/07/07 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
Python 远程开关机的方法
2020/11/18 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
晚会邀请函范文
2014/01/24 职场文书
售前工程师职业生涯规划
2014/03/02 职场文书
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL