angularJS-1:ng-repeat用法

最新推荐文章于 2024-01-28 05:15:00 发布

Gentle孟

最新推荐文章于 2024-01-28 05:15:00 发布

阅读量1.1k

点赞数

分类专栏： js 文章标签： angular

本文链接：https://blog.csdn.net/MouSo/article/details/70049624

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

直接撸代码：
列表的增加，删除操作，采用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开始，用于告诉你当前元素是否是集合中的第几个元素。

Gentle孟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJS-1:ng-repeat用法

直接撸代码：列表的增加，删除操作，采用angular 的ng-repeat循环输出列表项<!doctype html><html ng-app><head> <meta charset="utf-8"> <title>ng-repeat directive</title></head><body><table ng-controller="CartController"
复制链接

扫一扫