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之十四 (触发事件核心方法)
Aug 23 Javascript
JS文本框默认值处理详解
Jul 10 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
p5.js入门教程之小球动画示例代码
Mar 15 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
如何测量vue应用运行时的性能
Jun 21 Javascript
node事件循环和process模块实例分析
Feb 14 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 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
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
PHP开发的一些注意点总结
2010/10/12 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
javascript的parseFloat()方法精度问题探讨
2013/11/26 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
用jQuery向div中添加Html文本内容的简单实现
2016/07/13 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
python实现二分查找算法
2017/09/21 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
Python和Go语言的区别总结
2019/02/20 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
python字典排序的方法
2019/10/12 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
生物技术专业毕业生求职信范文
2013/12/14 职场文书
办公室文员自荐书
2014/02/03 职场文书
离退休人员聘用协议书
2014/11/24 职场文书
2014年教研组工作总结
2014/11/26 职场文书
交警失职检讨书
2015/01/26 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
职工宿舍管理制度
2015/08/05 职场文书
高一作文之乐趣
2019/11/21 职场文书
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript
PHP 时间处理类Carbon
2022/05/20 PHP