ng 实现插入和删除

 

结果：

 

代码： 

 

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta charset="UTF-8">
  <script src="js/angular.js"></script>
  <title></title>
</head>
<body>
<!--
1、搭建MVC的架子
2、构造数据
3、显示
4、实现添加
5、实现删除
-->

<div ng-controller="myCtrl">
  <button ng-click="addToCart()">
    添加
  </button>
  <table>
    <thead>
    <tr>
      <th>单价</th>
      <th>数量</th>
      <th>小计</th>
      <th>删除</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="obj in cart track by $index">
      <td>{{obj.price}}</td>
      <td>{{obj.count}}</td>
      <td>{{obj.price*obj.count}}</td>
      <td>
        <button
          ng-click="deleFromCart($index)">
          删除
        </button>
      </td>
    </tr>
    </tbody>
  </table>
</div>

<script>
  var app = angular.module('myApp',['ng']);

  app.controller('myCtrl', function ($scope) {
    $scope.cart = [
      {price:40,count:3},
      {price:20,count:2},
      {price:90,count:1}
    ];
    
    $scope.addToCart = function () {
      var newObj = {
        price:Math.floor(Math.random()*20),
        count:Math.floor(Math.random()*10)
      };
      $scope.cart.push(newObj);
    }

    $scope.deleFromCart = function (index) {
      $scope.cart.splice(index,1);
    }
  })

</script>


</body>
</html>

 

posted @ 2017-06-06 21:00  快乐的咸鱼  阅读(597)  评论(0)  编辑  收藏  举报