编码世界程序员的那些事儿

AngularJS入门教程-循环(四)

2016-06-12  本文已影响358人  憨厚的老菜鸟

前面我们已经学习了控制器的使用,今天我们就来使用控制器,讲一下在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>

结果展示

上一篇下一篇

猜你喜欢

热点阅读