AngularJS例子 ng-repeat遍历输出 通过js的splice方法删除当前行
2017-09-26 09:40
656 查看
<!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>
相关文章推荐
- Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
- AngularJS使用ng-repeat遍历二维数组元素的方法详解
- angularJs使用ng-repeat遍历后选中某一个的方法
- splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容。
- Angularjs中ngRepeat遍历出错
- angularJs中ng-repeat遍历动态生成的表单元素绑定ng-model无效的问题
- Java中List遍历删除以及Map的输出方法
- JS之数组删除/添加项目方法splice
- AngularJS通过$sce输出html的方法
- AngularJS ng-repeat数组有重复值的解决方法
- 关于AngularJS中ng-repeat问题(问卷遍历问题)
- AngularJS监听ng-repeat渲染完成的方法
- AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
- AngularJS使用 ng-repeat 中的 $index与替代方法
- AngularJs中,如何在ng-repeat完成之后,执行Js脚本
- 两种方法实现单向链表的创建、遍历、删除、查找、逆序输出(循环法和递归法)
- shell通过遍历输出两个日期范围内所有日期的方法
- angularJS指令ng-repeat生成的dom元素js获取不到
- 《我的Angular入坑记》——通过小例子看ng-repeat
- 关于 js中 数组删除 和替换的例子(splice 和 slice)(w3cschool)