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

简介: ng-repeat directive 我的购物车 序号 商品 单价 数量 金额 操作 {{$index + 1}} {{item.
<!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>

  

相关文章
|
3天前
|
前端开发 JavaScript
前端 js 经典:数组常用方法总结
前端 js 经典:数组常用方法总结
12 0
|
8天前
|
存储 JavaScript 前端开发
史上最详细JavaScript数组去重方法(11种)
使用set和Array.from ()方法 array.from可以将set结构转成数组
22 7
|
1天前
|
移动开发 JavaScript iOS开发
WKWebView和js互调方法的实现
WKWebView和js互调方法的实现
4 0
|
2天前
|
JavaScript 前端开发
Symbol在JavaScript中还有哪些内置的Symbol可以用于定义特定的方法或属性
Symbol在JavaScript中还有哪些内置的Symbol可以用于定义特定的方法或属性
|
3天前
|
前端开发 JavaScript
前端 JS 经典:数组去重万能方法
前端 JS 经典:数组去重万能方法
7 0
|
3天前
|
前端开发 JavaScript 流计算
前端 js 经典:字符串超全方法总结
前端 js 经典:字符串超全方法总结
11 0
|
4天前
|
前端开发 JavaScript 开发者
JavaScript中的异步编程方法总结
在JavaScript开发中,处理异步操作是非常常见的情况。本文将总结JavaScript中常用的异步编程方法,包括Callback、Promise、Async/Await等,分析其优缺点,并提供使用建议。
|
5天前
|
缓存 前端开发 JavaScript
React和Next.js开发常见的HTTP请求方法
React和Next.js开发常见的HTTP请求方法
9 0
|
6天前
|
前端开发 JavaScript
前端 JS 经典:Math 常用方法汇总
前端 JS 经典:Math 常用方法汇总
10 0
|
6天前
|
前端开发 JavaScript
前端 js 经典:Object 常用原生方法
前端 js 经典:Object 常用原生方法
11 2