angularjs遍历集合添加值表格进行删除

来源：互联网发布：ms8.0 linux安装教程编辑：程序博客网时间：2024/05/21 22:40

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="../kuwenjian/angular.js" ></script><script>var app = angular.module("myapp" , []);app.controller("mycon" , function($scope){$scope.a="我是哈哈哈";$scope.money=101;$scope.delete=function(index){$scope.goods.splice(index,1);$scope.zje=0;for(inde in $scope.goods){var ww = $scope.goods[inde].num * $scope.goods[inde].price;$scope.zje=ww+$scope.zje;}}$scope.goods=[{name:"鼠标",num:1,price:101},{name:"键盘",num:3,price:601},{name:"主机",num:1,price:3001}];$scope.isShow = function(){if($scope.goods.length>0){return true;}else{return false;}}$scope.zje=0;for(inde in $scope.goods){var ww = $scope.goods[inde].num * $scope.goods[inde].price;$scope.zje=ww+$scope.zje;}});</script></head><body ng-app="myapp" ng-controller="mycon">{{money}}<h3>您的购物车</h3><table width="500" border="1" cellspacing="1"><thead>    <tr>      <td>商品名称</td>      <td>数量</td>      <td>单价</td>      <td>小计</td>      <td>操作</td>       </tr>    </thead>     <tbody>    <tr ng-repeat="good in goods">      <td>{{good.name}}</td>      <td>{{good.num}}</td>      <td>{{good.price | currency:"RMB￥"}}</td>      <td>{{good.num * good.price | currency:"RMB￥"}}</td>      <td><button ng-click="delete($index)">删除</button></td>    </tr>     <tr>       <td colspan="3"></td>      <td>{{zje}}</td>      <td> </td>    </tr>  </tbody></table><p ng-if="!isShow()">购物车为空!!!</p></body></html>

没有注释可以复制运行,在Hbuilder中

阅读全文

0 2