显示数据列表:ngRepeat

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在控制器里我们可能从应用的后台提供出来一个数组数据或者是一个对象,我们可以在视图上面循环的输出数组里面的每一个项目,或者对象里的所有的 key 还有 value ..

先打开 app.js ... 在这里我们再给定义的 myApp 这个模块去添加一个控制器 ... 输入 myApp.controller ... 这个控制器可以叫它 ShowController ... 在这个控制器里,在 $scope 上面,添加点数据 ... $scope.shows 等于 ... 它的值是一个数组 ... 数组里的每个项目都是一个对象 ...

现在,我们想把这些数据输出到视图上 ... 先回到 index.html ... 添加一个元素 ... 上面再用一个 ng-controller ,指定一下对应的控制器 ... 这里就是 ShowController ...

在这个 div 标签里面,我们想去显示一个数据的列表 ... 这个列表我打算放到一个无序列表里面,所以先用一个 ul 标签 ... 在这个标签里面,再用一个 li 标签, 在这个 li 标签上面, 再使用 Angular 的 ngRepeat 指令 ... 添加一个 ng-repeat 属性 ... 它的值可以使用特定的一种形式 ... show in shows ... 它的意思就是,把 ShowController 里面的 shows 这个数组里的每一个项目分别交给一个叫 show 的变量 ... 这样每次循环的时候, 我们都可以使用这个 show 来引用,shows 这个数组里的对象的值 ... 注意每次循环都会包含这个 li 标签 ...

在这个标签里面,再用一个绑定,去输出 show 的 title 属性的值 ... 用两组花括号 ... 花括号里面再用一个 show.title ...

保存 ... 在浏览器上,会输出一个列表 ... 列表里的项目就是在 ShowController 里面的 shows 这个数组里的项目的 title 属性的值 ... 打开浏览器的开发者工具 ... 你会看到,列表的每个项目都会放到一个 li 标签里面。

https://docs.angularjs.org/api/ng/directive/ngRepeat

显示数据列表:ngRepeat《 AngularJS 基础 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点