angularJS-1:ng-repeat用法

来源：互联网发布：linux求平均值编辑：程序博客网时间：2024/05/20 16:42

直接撸代码：
列表的增加，删除操作，采用angular 的ng-repeat循环输出列表项

<!doctype html><html ng-app><head>    <meta charset="utf-8">    <title>ng-repeat directive</title></head><body><table ng-controller="CartController">    <tr>        <th>序号</th>        <th>姓名</th>        <th>年龄</th>        <th>居住地</th>        <th>操作</th>    </tr>    <tr ng-repeat="item in items">        <td>{{$index + 1}}</td>        <td><input ng-model="item.name"></td>        <td>{{item.age}}</td>        <td><input ng-model="item.addres"></td>        <td>            <button ng-click="remove($index)">Remove</button>            <button ng-click="add()">add</button>        </td>    </tr></table><script src="angular.js"></script><script>    function CartController($scope) {        $scope.items = [            {name: "张三", addres: '西安', age: 19},            {name: "李四", addres: '北京', age: 13},            {name: "王五", addres: '成都', age: 28}        ];        $scope.remove = function (index) {            $scope.items.splice(index, 1);        }        $scope.add = function (){            $scope.items.push({name:'hhhhaaaa',addres:'11111',age:18});        }    }</script></body></html>

ng-repeat指令需要循环内容的元素上，items和控制器上的变量名对应，item是为数组中单个对象起的别名。$index可以返回当前引用对象的序号，从0开始，用于告诉你当前元素是否是集合中的第几个元素。

0 0