ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

argular js 集合基本操做

2020-07-10 17:02:32  阅读:245  来源: 互联网

标签:index shu jia shang js scope 集合 argular name


<!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="mohu" />
   <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:mohu} | 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>

标签:index,shu,jia,shang,js,scope,集合,argular,name
来源: https://www.cnblogs.com/lychee-wang/p/13280108.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有