网站建设资讯

NEWS

网站建设资讯

Angular.js下ng-app和ng-model怎么使用

今天小编给大家分享一下Angular.js下ng-app和ng-model怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

创新互联公司服务项目包括随县网站建设、随县网站制作、随县网页制作以及随县网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,随县网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到随县省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

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

 
 
   
     
   
   
    Your name:  
    
      Hello {{yourname || 'World'}}!     

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就可以完成一个列表搜索功能。(这是中文网上的实例代码,先不需要管不清楚的部分)

 
  
   
   Search:  
  
                      {{phone.name}}      

{{phone.snippet}}

                 
   
 

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

Search:  
Sort by: 
 
 Alphabetical 
 Newest 
 
 
  
  {{phone.name}} 
  

{{phone.snippet}}

    

以上就是“Angular.js下ng-app和ng-model怎么使用”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。


分享标题:Angular.js下ng-app和ng-model怎么使用
本文网址:http://cdweb.net/article/iedsep.html

其他资讯