angularjs初识ng-app、ng-model、ng-repeat指令
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指令的更多相关文章
- 不知道张(zhāng)雱（pāng）是谁？你out了！
张(zhāng)雱(pāng)是谁?也许你已经听说过了,也许你还没听说过呢,不过你一定听说过老刘——刘强东,没错,这二人是有关系的,什么关系,京东是老刘的,而张雱呢?张雱是京东旗下52家关联公司法人代 ...
- AngularJs学习笔记--Understanding the Model Component
原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model 在angular文档讨论的上下文中,术语“model”可以 ...
- django中跨app引用model
可能是自己水平的原因,总感觉跨django中app引用有点怪怪的,所以在自己没有达到另一个级别之前就先把正确的解决 方案记一下吧. 一.django中跨app引用model,以app02中的model ...
- angularjs（二）模板终常用的指令的使用方法
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
- Angularjs 学习笔记-2017-02-05-初识Angular及app、model、controller、repeat指令和fileter、orderBy
ng-app 定义作用域,从作用域处开始执行ng命令指令 ng-model 数据绑定字符,用于双向数据绑定 ng-controller ng控制台,定义function name($scope)来 ...
- ng build --aot 与 ng build --prod
angluar的编译有以下几种方式: ng build 常规的压缩操作 代码体积最大 ng build --aot angular预编译 代码体积较小 ng build --pr ...
- 使用AngularJS 进行Hybrid App 开发已经有一年多时间了,这里做一个总结
一.AngularJS 初始化加载流程 1.浏览器载入HTML,然后把它解析成DOM.2.浏览器载入angular.js脚本.3.AngularJS等到DOMContentLoaded事件触发.4.A ...
- AngularJS初识
AngularJS 简介 AngularJS是一个javaScript框架,是一个用JavaScript编写的库,通过指令扩展了HTML,且通过表达式绑定数据到HTML中. AngularJS使开发 ...
- AngularJS - Apply方法监听model变化
<body> <div ng-app="myApp"> <div ng-controller="firstController" ...
随机推荐
- tensorflow进阶篇-4(损失函数1)
L2正则损失函数(即欧拉损失函数),L2正则损失函数是预测值与目标函数差值的平方和.L2正则损失函数是非常有用的损失函数,因为它在目标值附近有更好的曲度,并且离目标越近收敛越慢: # L = (pre ...
- 关于符号Symbol第二篇
来看一下继承自Symbol的具体实现类. 1.TypeSymbol /** A class for type symbols. * Type variables are represented by ...
- filebeat output redis 报错 i/o timeout
filebeat output redis 报错 i/o timeout 先把报错内容贴出来. ERROR redis/client. go: Failed to RPUSH to redis li ...
- openTSDB（转）
1.OpenTSDB介绍 1.1.OpenTSDB是什么?主要用途是什么? 官方文档这样描述:OpenTSDB is a distributed, scalable Time Series Datab ...
- Hadoop+Hive 操作mongodb数据
Hadoop+Hive 操作mongodb数据 1.版本概述 hadoop-2.7.3.hive-2.2 下载响应的jar包:http://mvnrepository.com/,直接搜索想要的jar包 ...
- 原生JavaScript 导出excel表格（兼容ie和其他主流浏览器）
因同事的需求是想前端导出excel表格,网上找了一些demo,自己修改了一下,可能以后会用到,记录下来吧,兼容ie和一些主流浏览器,ie可能会报错,原因参考 这里,edge 浏览器还没有办法导出,正在 ...
- vs未能解析此远程名称: 'api.nuget.org'
知道了DNS地址我们就可以来修改了,点击电脑右下角的连接图标,选择“打开网络和共享中心”,当然也可以在控制面板中“网络和Internet”进入“打开网络和共享中心”: 进入“网络和共享中心”后,我 ...
- C#中Cookie，Session，Application的用法与区别？
1.Application 储存在服务端,没有时间限制,服务器关闭即销毁(前提是自己没写销毁方法) 2.Session 储存在服务端,客户端(浏览器)关闭即销毁(若长时间不使用 且 浏览器未关闭的情况 ...
- 结束回调事件（开头必须cp开头，JSProperties传参）
<dx:ASPxComboBox ID="comBrand" CssClass="case" ClientInstanceName="comBr ...
- 【转载&&干货】Noip应试技巧
NOIP应试技巧 如何看待别人的经验? 我想大家都有台上的学长滔滔不绝,但是自己在台下漠不关心,或是老师考试前的叮嘱说完一会儿功夫就忘记了的经历吧.所以,有可能我接下来的所说的话,一到考场上就全部忘记 ...