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 相关文章推荐
Div自动滚动到末尾的代码
Oct 26 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
js中创建对象的几种方式
Feb 05 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 Javascript
vue中touch和click共存的解决方式
Jul 28 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
怎样在UNIX系统下安装php3
2006/10/09 PHP
用header 发送cookie的php代码
2007/03/16 PHP
用来给图片加水印的PHP类
2008/04/09 PHP
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
Python抓取京东图书评论数据
2014/08/31 Python
Python验证码识别处理实例
2015/12/28 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
python如何导入依赖包
2020/07/13 Python
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
init进程的作用
2015/08/20 面试题
音乐系毕业生自荐信
2013/10/27 职场文书
大学生预备党员自我评价分享
2013/11/16 职场文书
大学生党课思想汇报
2013/12/29 职场文书
师德学习感言
2014/01/31 职场文书
优秀应届毕业生推荐信
2014/02/18 职场文书
关于安全的标语
2014/06/10 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js