angularjs

来源：互联网发布：淘宝网店运营推广方案编辑：程序博客网时间：2024/06/05 20:20

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/angular.js"></script>
  <script>
   var app = angular.module("myApp", []);
   app.controller("myCtrl", function($scope) {
    $scope.shops = [{
     id: 80,
     name: "iPhone",
     price: 5400,
     num:10,
     state: false
    }, {
     id: 1200,
     name: "ipad mini",
     price: 2200,
     num:20,
     state: false
    }, {
     id: 500,
     name: "ipad air",
     price: 2340,
     num:30,
     state: false
    }, {
     id: 29,
     name: "ipad",
     price: 1420,
     num:40,
     state: false
    }, {
     id: 910,
     name: "imac",
     price: 6600,
     num:50,
     state: false
    }];

//下拉菜单排序
$scope.orderSel = "";

    /*$scope.de=function(index){
     //删除当前项
     $scope.shops.splice(index,1);
    }*/

    $scope.de = function(name, state) {
     if(state) {
      if(window.confirm("确定要删除" + name + "吗？")) {
       for(index in $scope.shops) {
        if(name == $scope.shops[index].name) {
         $scope.shops.splice(index, 1);
        }
       }
      }
     }else{
      alert("请先选择");
     }
    }
    //修改价格
    $scope.update = function(shop){
     var newPrice = window.prompt("请输入要修改的"+shop.name+"商品的价格",shop.price);
     if(newPrice == null || newPrice == ""){
      alert("商品价格不能为空")
     }else if(isNaN(newPrice)){
      alert("商品价格必须是数字")
     }else{
      shop.price = parseInt(newPrice);
     }
    }
    //增加数量
    $scope.add = function(shop){
     shop.num++;
    }
    //减少数量
    $scope.less = function(shop){
     if(shop.num>=1){//商品数量大于1
      shop.num--;
     }else{

     }
    }

    //全选、全不选
    $scope.selectAll = false;
    $scope.selectAllFun = function() {
     if($scope.selectAll) {
      for(index in $scope.shops) {
       $scope.shops[index].state = true;
      }
     } else {
      for(index in $scope.shops) {
       $scope.shops[index].state = false;
      }
     }
    }

    //反选
    $scope.checkSelAll = function() {
     var flag = false;
     for(index in $scope.shops) {
      if(!$scope.shops[index].state) {
       //满足条件
       flag = true;
      }
     }

     if(flag) {
      $scope.selectAll = false;
     } else {
      $scope.selectAll = true;
     }
    }

    //批量删除
    $scope.delSelect = function() {
     var selArr = [];
     for(index in $scope.shops) {
      if($scope.shops[index].state) {
       selArr.push($scope.shops[index].name)
      }
     }

     if(selArr.length <= 0) {
      alert("请先选择");
     } else {
      if(window.confirm("确定要删除吗？")) {
       for(index1 in selArr) {
        for(index2 in $scope.shops) {
         if(selArr[index1] == $scope.shops[index2].name) {
          $scope.shops.splice(index2, 1);
         }
        }
       }
      } else {

      }
     }
    }

    //添加商品
    $scope.isShow = false;
    $scope.isShow2 = false;
    $scope.showForm = function() {
     if($scope.isShow) {
      $scope.isShow = false;
     } else {
      $scope.isShow = true;
     }
    }
    //提交按钮
    $scope.submit = function() {
     $scope.errorArr = [];
     //判断id是否为空
     if($scope.newId == null || $scope.newId == "") {
      $scope.errorArr.push("ID不能为空");
     } else if(isNaN($scope.newId)) {
      $scope.errorArr.push("ID必须是数字");
     }
     if($scope.newName == null || $scope.newName == "") {
      $scope.errorArr.push("产品名称不能为空");
     } else {
      for(index in $scope.shops) {
       if($scope.shops[index].name == $scope.newName) {
        $scope.errorArr.push("产品名称不能重复");
       }
      }
     }
     if($scope.newPrice == null || $scope.newPrice == "") {
      $scope.errorArr.push("价格不能为空");
     } else if(isNaN($scope.newPrice)) {
      $scope.errorArr.push("价格必须是数字");
     }

     if($scope.errorArr.length > 0) {
      //显示列表
      $scope.isShow2 = true;
     } else {
      $scope.isShow2 = false;
      //添加商品
      var newShop = {
       id: parseInt($scope.newId),
       name: $scope.newName,
       price: parseInt($scope.newPrice),
       num:1,
       state: false
      };
      $scope.shops.push(newShop);
      $scope.isShow = false;
     }
    }
   })
  </script>
</head>

   <table border="1px solid blue;" cellpadding="10" cellspacing="0">
    <thead>
     <tr>
      <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /> </th>
      <th>产品编号</th>
      <th>产品名称</th>
      <th>产品价格</th>
      <th>产品数量</th>
      <th>操作</th>
     </tr>
    </thead>
    <tbody>
     <tr ng-repeat="shop in shops | filter:{name:search} | orderBy:orderSel">
      <td><input type="checkbox" ng-model="shop.state" ng-click="checkSelAll()" /></td>
      <td>{{shop.id}}</td>
      <td>{{shop.name}}</td>
      <td>{{shop.price}}</td>
      <td>
       <button ng-click="less(shop)">-</button>
       <input type="text" ng-model="shop.num" size="1"/>
       <button ng-click="add(shop)">+</button>
      </td>
      <td width="100px">
       <button ng-click="de(shop.name,shop.state)">删除</button>
       <button ng-click="update(shop)">修改</button>
      </td>
     </tr>
    </tbody>
   </table><br />
   <button ng-click="showForm()">添加商品</button><br /><br />

     <ul ng-show="isShow2" style="width: 200px; background-color: #f89;">
      <li ng-repeat="error in errorArr">{{error}}</li>
     </ul>

</fieldset>

</center>
</body>

</html>

阅读全文

0 0