ng-app属性是angular.js的标志语句，它标记了angular.js的作用域。ng-app可以添加在很多地方，像上面那样添加到html标签上，说明angular脚本对整个页面都起作用。也可以在局部添加ng-app属性，比如在某一个div内添加ng-app，则表明接下来的整个div区域使用angular脚本解析，而其他位置则不适用angular脚本解析。

<!doctype html>

<html ng-app>

<head>

<script src="http://code.angularjs.org/angular1.0.1.min.js"></script>

</head>

<body>

Your name: <input type="text" ng-model="yourname" placeholder="World">

Hello {{yourname || 'World'}}!

</body>

</html>

ng-model表示建立一个数据模型。这里在input输入姓名的输入框内，我们把该定义了一个yourname数据模型。定义了该模型后，我们可以在下面进行调用，方法是利用{{}}。这样就完成了数据绑定，当我们在输入框内输入内容时，会同步到下面的Hello语句块中。
ng-model定义的数据模型不仅可以用于上述场景，还能在许多情况下得到广泛应用。

ng-repeat属性

ng-repeat主要用于循环输出列表。

<html ng-app="myApp">
<head>
<title>angularjs-demo</title>
<script type="text/javascript" src="angular.min.js"
charset="utf-8"></script>
</head>
<body ng-controller="ctrl">
<table width="100%" border="1" cellspacing="0"
cellpadding="0">
  <tr>
    <th>学号</th>
    <th>姓名</th>
    <th>分数</th>
  </tr>
  <tr ng-repeat="item in items">
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
    <td>{{item.score}}</td>
  </tr>
</table>
<script>
    var app = angular.module('myApp',[]);
    app.controller("ctrl",function($scope,$location){
        $scope.items = getStu();
    });
    
    function getStu() {
        return [{id:1010,name:'张三',score:50},{id:1011,name:'李四',score:60},{id:1012,name:'王五',score:80}];
    }
    </script>
</body>
</html>

在ng-repeat中使用$index需要注意。添加使用过滤器过滤后的索引和原始索引不一致，在对列表做移出操作等的时候，使用索引会出现问题。

<ul ng-controller="ListCtrl">

<li ng-repeat="item in items">

{{item.name}}

<button ng-click="remove($index)">remove</button>

</li>

</ul>

对应的控制器：

app.controller('ListCtrl',
['$scope', function($scope) {
   $scope.items = getItems();
   $scope.remove = function(index) {
     var item = $scope.items[index];
      removeItem(item);
    }; }]);

其问题在于 $scope.items[index];

解决办法如下：
这里将 remove($index) 改成 remove(item), 并修改了 $scope.remove 函数来直接操作传过来的对象。

<ul ng-controller="ListCtrl">

<li ng-repeat="item in items | searchFilter">

{{item.name}}

<button ng-click="remove(item)">remove</button>

</li>

</ul>

控制器如下所示:

$scope.remove = function(item) {

removeItem(item);
};

ng-model 在ng-repeat中的运用
 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>

声明：本文部分示例来自网络，再此感谢示例原创们的辛苦奉献。

angularjs初识ng-app、ng-model、ng-repeat指令的更多相关文章

  1. 不知道张(zhāng)雱（pāng）是谁？你out了！

    张(zhāng)雱(pāng)是谁?也许你已经听说过了,也许你还没听说过呢,不过你一定听说过老刘——刘强东,没错,这二人是有关系的,什么关系,京东是老刘的,而张雱呢?张雱是京东旗下52家关联公司法人代 ...

  2. AngularJs学习笔记--Understanding the Model Component

    原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model 在angular文档讨论的上下文中,术语“model”可以 ...

  3. django中跨app引用model

    可能是自己水平的原因,总感觉跨django中app引用有点怪怪的,所以在自己没有达到另一个级别之前就先把正确的解决 方案记一下吧. 一.django中跨app引用model,以app02中的model ...

  4. angularjs（二）模板终常用的指令的使用方法

    通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...

  5. Angularjs 学习笔记-2017-02-05-初识Angular及app、model、controller、repeat指令和fileter、orderBy

    ng-app   定义作用域,从作用域处开始执行ng命令指令 ng-model 数据绑定字符,用于双向数据绑定 ng-controller ng控制台,定义function name($scope)来 ...

  6. ng build --aot 与 ng build --prod

    angluar的编译有以下几种方式: ng build  常规的压缩操作    代码体积最大 ng build --aot   angular预编译      代码体积较小 ng build --pr ...

  7. 使用AngularJS 进行Hybrid App 开发已经有一年多时间了,这里做一个总结

    一.AngularJS 初始化加载流程 1.浏览器载入HTML,然后把它解析成DOM.2.浏览器载入angular.js脚本.3.AngularJS等到DOMContentLoaded事件触发.4.A ...

  8. AngularJS初识

     AngularJS 简介 AngularJS是一个javaScript框架,是一个用JavaScript编写的库,通过指令扩展了HTML,且通过表达式绑定数据到HTML中. AngularJS使开发 ...

  9. AngularJS - Apply方法监听model变化

    <body> <div ng-app="myApp"> <div ng-controller="firstController" ...

随机推荐

  1. 做了三年的菜鸟web前端的感悟

    作为一名真正的菜鸟我想没有比我更加实在的了,三年之中,虽然做了一二三四五六七个项目,基本都是jQuery写的,但是还是一名不折不扣的菜鸟.这让我很尴尬啊,面对前端大量要学习的东西,真的是很头疼,技术更 ...

  2. Ejb3 + Jboss8 出现Session id hasn't been set for stateful component

    Ejb 3 + JBoss 8  在使用客户端远程访问有状态的Ejb对象时,出现ERROR: Session id hasn't been set for stateful component 出现该 ...

  3. Java之集合(五)LinkedList

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7298017.html 1.前言 Java中另一个常见的list就是本章将要讲的LinkedList.ArrayL ...

  4. wordpress 后台404解决办法

    1.vim /usr/local/nginx/conf/wordpress.conf2.rewrite /wp-admin$ $scheme://$host$uri/ permanent;3.ngni ...

  5. mongodb与关系型数据库优缺点比较

    1.与关系型数据库相比,MongoDB的优点:①弱一致性(最终一致),更能保证用户的访问速度②文档结构的存储方式,能够更便捷的获取数据③内置GridFS,支持大容量的存储.④内置Sharding.⑤第 ...

  6. redis 安装报错 jemalloc/jemalloc.h: No such file or directory。

    对于redis安装的这个错误,我在博客redis 安装 与错误解决办法最后有提及,但是网上大部分文章的对这个问题的解答都是有误的.所以在这里单列出来. 错误内容: jemalloc/jemalloc. ...

  7. php中接收参数，不论是来自GET还是POST方法

    不多说,直接上代码, 其实也就是先用GET的方法去获取,如果值为空,在用POST方法去获取 写下来是为了方便和备忘 function getParam($str){       if ( isset( ...

  8. [作业] Python入门基础--三级菜单

    用字典存储数据 可以随时返回上一级,随时退出程序 只能用循环判断等内置方法,不得导入模块 menu = { '广东':{ '广州':{ '越秀区':{ '面积':'33.80', '人口':'115万 ...

  9. redis实战笔记（8）-第8章 构建简单的社交网站

    本章主要内容   用户和状态 主页时间线 关注者列表和正在关注列表 状态消息的发布与删除 流API                  

  10. cordova打包APK，报错：Cannot evaluate module CordovaLib : Configuration with name 'debug' not found.

    原因:之前做其他项目的时候把环境(gradle)升级了. 解决方案:将gradle降低回原来的版本.