argular js 集合基本操做

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   tbody tr:nth-child(even) {
    background-color: aqua;
   }
   
   tbody tr:nth-child(odd) {
    background-color: gold;
   }
   
   ;
  </style>
  <script type="text/javascript" src="../js/angular.js"></script>
  <script>
   var app = angular.module("myapp", []);
   app.controller("mycon", function($scope) {
    $scope.shang = [{
     id: 1,
     name: "橘子",
     shu: 20,
     jia: 10,
     state: false
    }, {
     id: 9,
     name: "苹果",
     shu: 16,
     jia: 20,
     state: false
    }, {
     id: 3,
     name: "柚子",
     shu: 18,
     jia: 15,
     state: false
    }, {
     id: 6,
     name: "榴莲",
     shu: 5,
     jia: 98,
     state: false
    }];
    //总计
    $scope.zong = function() {
     var sun = 0;
     for(var i = 0; i < $scope.shang.length; i++) {
      sun += $scope.shang[i].jia * $scope.shang[i].shu;
     }
     return sun;
    };
    //删除
    $scope.shanchu = function($index) {
     $scope.shang.splice($index, 1);
    };
    //全选反选
    $scope.quan = false;
    $scope.fanxuan = function() {
     if($scope.quan) {
      for(index in $scope.shang) {
       $scope.shang[index].state = true;
      }
     } else {
      for(index in $scope.shang) {
       $scope.shang[index].state = false;
      }
     }
    };
    //批量删除
    $scope.pisan = function() {
     if(confirm("确定删除吗")) {
      for(var i = 0; i < $scope.shang.length; i++) {
       if($scope.shang[i].state == true) {
        $scope.shang.splice(i, 1);
        i--;
       }
      }
     }
    }
    //添加
    $scope.tian = function() {
     var s = {
      id: $scope.add_id,
      name: $scope.add_name,
      shu: $scope.add_shu,
      jia: $scope.add_jia
     }
     $scope.shang.push(s);
    }
   //修改回显
    $scope.xiugai=function($index){
      $scope.a = true;
      var name1 = $scope.shang[$index].name;
                    var shu1 = $scope.shang[$index].shu;
                     var jia1 = $scope.shang[$index].jia;
                   
                     $scope.x_name = name1;
                    $scope.x_shu= shu1;
                    $scope.x_jia= jia1;
     $scope.i = $index;
    }
   //确认修改
    $scope.ok=function(){
      var xinshang = {"name":$scope.x_name,"shu":$scope.x_shu,"jia":$scope.x_jia};
                    $scope.shang.splice($scope.i,1,xinshang);
    }
   })
  </script>
 </head>
 <body ng-app="myapp" ng-controller="mycon">
  <center>
   <h2>账单查询</h2>
   <input type="text" ng-model="add_id"/>
   <input type="text" ng-model="add_name" />
   <input type="text" ng-model="add_shu" />
   <input type="text" ng-model="add_jia" />
   <button ng-click="tian()">添加</button><br>
   <input type="text" placeholder="查询" ng-model="*" />
   <select ng-model="pai">
    <option value="">- 请选择 -</option>
    <option value="jia">-价格低到高-</option>
    <option value="-jia">-价格高到低-</option>
   </select>
   <button ng-click="pisan()">批量删除</button>
   <table border="1" cellpadding="15" cellspacing="0">
    <thead>
     <tr>
      <th><input type="checkbox" ng-model="quan" ng-click="fanxuan()"></th>
      <th>编号</th>
      <th>名称</th>
      <th>数量</th>
      <th>价钱</th>
      <th>小计</th>
      <th>操作</th>
     </tr>
    </thead>
    <tbody>
     <tr ng-repeat="diao in shang | filter:{name:*} | orderBy:pai ">
      <td><input type="checkbox" ng-model="diao.state"></td>
      <td ng-if="">{{$index}}</td>
      <td>{{diao.id}}</td>
      <td>{{diao.name}}</td>
      <td>{{diao.shu}}</td>
      <td>{{diao.jia | currency}}</td>
      <td ng-app="">{{diao.jia*diao.shu}}</td>
      <td><button ng-click="shanchu($index)">删除</button>
       <button ng-click="xiugai($index)">修改</button>
      </td>
     </tr>
    </tbody>
   </table>
   总价:{{zong() | currency:‘RMB¥‘}}<br>
   名字:<input type="text" ng-model="x_name"/><br>
                              数量:<input type="text" ng-model="x_shu"/><br>
                             价格:<input type="text" ng-model="x_jia"/><br>
    <button ng-model="i" ng-click="ok(index)">ok</button>
  </center>
 </body>
</html>

argular js 集合基本操做

上一篇:kubernetes1.17.2离线安装


下一篇:php抽象类和接口的区别