AngularJS

最新推荐文章于 2024-07-11 15:59:35 发布

眼角带笑_fxs

最新推荐文章于 2024-07-11 15:59:35 发布

阅读量186

点赞数

本文链接：https://blog.csdn.net/fxs_321/article/details/78575800

版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>第三周模拟考试</title>
  <script type="text/javascript" src="../angularjs/angular-route.js" ></script>
  <script type="text/javascript" src="../angularjs/angular.js" ></script>
  <script>
   var app=angular.module("myApp",[]);
   app.controller("myCtrl",function($scope){
    $scope.list=[
     {
      id:80,
      name:"iphone",
      price:2345,
      state:false
     },
     {
      id:60,
      name:"zhangsna",
      price:7653,
      state:false
     },
     {
      id:100,
      name:"ipad",
      price:14500,
      state:false
     },
     {
      id:1200,
      name:"asda",
      price:2345,
      state:false
     },
     {
      id:910,
      name:"weqrqw",
      price:1320,
      state:false
     }
    ];

    $scope.pri="--请选择--";
    $scope.money=function(item){
     if($scope.pri=="--请选择--"){
      return true;
     }else{
      var arr=$scope.pri.split("-");
      var min = arr[0];
      var max = arr[1];
      if(item<min||item>max){
       return false;
      }else{
       return true;
      }
     }

    };

    $scope.del=function(name){
     for(index in $scope.list){
      if(name==$scope.list[index].name){
       $scope.list.splice(index,1);
      }else{

      }
     }
    };

    $scope.updata=function(price){
     //遍历一下
     for(index in $scope.list){
      if(price==$scope.list[index].price){
       var result = parseInt(window.prompt("请输入要修改的价格",price));
       if(result<0){
        alert("输入的价格有误！请重新输入！");
       }else{
        if(window.confirm("确定要修改"+$scope.list[index].name+"的价格为"+result+"?")){
         $scope.list[index].price = result;
        };
       }
      }else{

      }
     }
    };

    $scope.selOrder;
    $scope.orderSel=function(){
     if($scope.selOrder=="id"){
      $scope.orderFlag="";
      $scope.orderLine="id";
     }else if($scope.selOrder=="-id"){
      $scope.orderFlag="-";
      $scope.orderLine="id";
     }else if($scope.selOrder=="price"){
      $scope.orderFlag="";
      $scope.orderLine="price";
     }else if($scope.selOrder=="-price"){
      $scope.orderFlag="-";
      $scope.orderLine="price";
     }
    };

    $scope.checkAll=false;
    $scope.checkSelectFun=function(){

     if($scope.checkAll){
      for(index in $scope.list){
       $scope.list[index].state=true;
      }
     }else{
      for(index in $scope.list){
       $scope.list[index].state=false;
      }
     }
    };

    //实现元素的反选
    $scope.checkSelectAll=function(){
     var flag=false;
     for(index in $scope.list){
      if(!$scope.list[index].state){
       flag=true;
      }
     }
     if(flag){
      $scope.checkAll=false;
     }else{
      $scope.checkAll=true;
     }

    }

    //删除所有的选中元素
    $scope.delSelect=function(){
     var isSelected=[];
     for(index in $scope.list){
      if($scope.list[index].state){
       isSelected.push($scope.list[index]);
      }
     }

     for(index in isSelected){
      var name=isSelected[index].name;
      for(index2 in $scope.list){
       if(name==$scope.list[index2].name){
        $scope.list.splice(index2,1);
       }
      }
     }

    };

   });
  </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
  <center>
   <input type="text" placeholder="产品名称" ng-model="search"/>
   产品价格
   <select ng-model="pri">
    <option>--请选择--</option>
    <option>0-2000</option>
    <option>2001-3000</option>
    <option>3001-4000</option>
    <option>4001-5000</option>
    <option>5001-6000</option>
    <option>6001-7000</option>
    <option>7001-8000</option>
    <option>8001-无穷大</option>
   </select>
   <select ng-change="orderSel()" ng-model="selOrder">
    <option value="">排序方式</option>
    <option value="id">id正序</option>
    <option value="-id">id逆序</option>
    <option value="price">价格正序</option>
    <option value="-price">价格逆序</option>
   </select>
   <button ng-click="delSelect()">批量删除</button>
   <br /><br />
   <table border="1px solid red" cellpadding="10" cellspacing="0">
    <tr>
     <td><input type="checkbox" ng-model="checkAll" ng-click="checkSelectFun()"/></td>
     <th ng-click="desc=!desc;col='id' ">产品编号</th>
     <th ng-click="desc=!desc;col='name' ">产品名称</th>
     <th ng-click="desc=!desc;col='price'">产品价格</th>
     <th>操作</th>
    </tr>

    <tr ng-repeat="l in list | filter:{'name':search} | orderBy:(orderFlag+orderLine)" ng-if="money(l.price)" ">
     <td><input type="checkbox" ng-model="l.state" ng-click="checkSelectAll()"/></td>
     <td>{{l.id}}</td>
     <td>{{l.name}}</td>
     <td>{{l.price}}</td>
     <td>
      <button ng-click="del(l.name)">删除</button>
      <button ng-click="updata(l.price)">修改</button>
     </td>
    </tr>
   </table>
  </center>

</body>
</html>