前面我们已经学习了控制器的使用,今天我们就来使用控制器,讲一下在AngularJS中,怎么样循环输出一组数据。
开发环境
Sublime Text(建议使用)
AngularJS-1.5.6
示例
//html代码
<div ng-controller="newBooks">
<h1>书单</h1>
<ul ng-repeat="item in books">
<li>书名:{{item.name}} , 价格:{{item.price}}</li>
</ul>
</div>
//javascript代码
angular.module('count',[])
.controller('newBooks',function($scope){
$scope.books=[
{name:"Java编程思想",price:"¥88"},
{name:"ios开发指南",price:"¥98"},
{name:"Android开发手册",price:"¥77"}
];
});
代码解释:
示例演示的是在页面中显示所有书的名字和价格。
我们先来看一下javascript代码,
创建一个控制器:
angular.module('count',[])
.controller('newBooks',function($scope){
$scope.books=[
{name:"Java编程思想",price:"¥88"},
{name:"ios开发指南",price:"¥98"},
{name:"Android开发手册",price:"¥77"}
];
});
创建一个名为“count”的应用模块,在这个模块中加入了一个名为“newBooks”的控制器,在控制器里,为$scope定义了一个books的属性,将一个对象数组赋给books属性。
下面在来看下html代码
ng-repeat指令:
<ul ng-repeat="item in books">
实现循环输出。其中,item用来接收books中单个对象,在输出name和price两个属性的时候,要使用item对象。如
<li>书名:{{item.name}} , 价格:{{item.price}}</li>
网友评论