AngularJS例子 ng-repeat遍历输出 通过js的splice方法删除当前行

2018-03-08 13:22:57 浏览数 (1)

代码语言:javascript复制
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>ng-repeat directive</title>
</head>
<body ng-app="myApp">
<table ng-controller="CartController">
    <caption>我的购物车</caption>
    <tr>
        <th>序号</th>
        <th>商品</th>
        <th>单价</th>
        <th>数量</th>
        <th>金额</th>
        <th>操作</th>
    </tr>
    <tr ng-repeat="item in items">
        <td>{{$index   1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.price | currency}}</td>
        <td><input ng-model="item.quantity"></td>
        <td>{{item.quantity * item.price | currency}}</td>
        <td>
            <button ng-click="remove($index)">Remove</button>
        </td>
    </tr>
</table>

<script src="js/angular-1.3.0.14/angular.min.js"></script>
<script>
    var app = angular.module('myApp', []);
    app.controller('CartController',function($scope){
        $scope.items = [
            {name: "苹果 iPhone7", quantity: 1, price: 5088.00},
            {name: "荣耀Magic", quantity: 1, price: 3699.00},
            {name: "vivo X9", quantity: 2, price: 2798.00}
        ];
        //$index包含了ng-repeat过程中的循环计数
        $scope.remove = function (index) {
            $scope.items.splice(index, 1);
        }
    })
</script>
</body>
</html>

0 人点赞