美文网首页编码世界程序员的那些事儿
AngularJS入门教程-循环(四)

AngularJS入门教程-循环(四)

作者: 憨厚的老菜鸟 | 来源:发表于2016-06-12 10:17 被阅读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>
    

    结果展示

    相关文章

      网友评论

        本文标题:AngularJS入门教程-循环(四)

        本文链接:https://www.haomeiwen.com/subject/qryedttx.html