當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
AngularJS例子 ng-repeat遍历输出 通过js的splice方法删除当前行
生活随笔
收集整理的這篇文章主要介紹了
AngularJS例子 ng-repeat遍历输出 通过js的splice方法删除当前行
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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>
與50位技術專家面對面20年技術見證,附贈技術全景圖
總結
以上是生活随笔為你收集整理的AngularJS例子 ng-repeat遍历输出 通过js的splice方法删除当前行的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: linux 挂载ISO文件以及yum源配
- 下一篇: Win10的UWP之标题栏的返回键(一)