angular

最新推荐文章于 2022-08-19 17:38:24 发布

qq_41640196

最新推荐文章于 2022-08-19 17:38:24 发布

阅读量237

点赞数

分类专栏：搜索文章标签： angular

本文链接：https://blog.csdn.net/qq_41640196/article/details/79078921

版权

搜索专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           span {
               color: red;
           }
       </style>
       <script type="text/javascript" src="js/angular.js"></script>
       <script>
           var app = angular.module("myApp", []);
           app.controller("myCtrl", function($scope) {
               $scope.products = [{
                   id: 6,
                   name: "张三",
                   pwd: 1234,
                   age: 32,
                   sex: "男",
                   ck: false
               }, {
                   id: 3,
                   name: "李四",
                   pwd: 1234,
                   age: 22,
                   sex: "女",
                   ck: false
               }, {
                   id: 7,
                   name: "bb",
                   pwd: 1234,
                   age: 12,
                   sex: "女",
                   ck: false
               }, {
                   id: 14,
                   name: "dd",
                   pwd: 1234,
                   age: 20,
                   sex: "女",
                   ck: false
               }]
               $scope.tjyh = function() {
                   $scope.yc = true;
               }
               //添加
               var newId = 20;
               $scope.regName = false;
               $scope.tj = function() {

                   if($scope.name == undefined || $scope.name == "") {
                       $scope.regName = true;
                   }else{
                       $scope.regName = false;
                   }
                   if($scope.pwd == undefined || $scope.pwd == "") {
                       $scope.regPwd = true;
                   }else{
                       $scope.regPwd = false;
                   }
                   if($scope.age == undefined || $scope.age == "") {
                       $scope.regAge = true;
                   }else{
                       $scope.regAge = false;
                   }
                   if($scope.sex == undefined || $scope.sex == "") {
                       $scope.regSex = true;
                   }else{
                       $scope.regSex = false;
                   }

                   if($scope.regName||$scope.regPwd||$scope.regAge||$scope.regSex) {

                   }else{
                       var id = newId++;
                       var name = $scope.name;
                       var pwd = $scope.pwd;
                       var age = $scope.age;
                       var sex = $scope.sex;
                       $scope.products.push({
                           id: id,
                           name: name,
                           pwd: pwd,
                           age: age,
                           sex: sex
                       });
                   }

               }
               //批量删除
               $scope.plsc = function() {

                   for(var i = 0; i < $scope.products.length; i++) {
                       if($scope.products[i].ck) {
                           $scope.products.splice(i, 1);
                           i--;
                       }
                   }

               }
               //全部删除
               $scope.qbsc = function() {
                   $scope.products.splice(0, $scope.products.length);
               }
               //全选
               $scope.qxAll = false;
               $scope.qx = function() {
                   for(pro in $scope.products) {
                       $scope.products[pro].ck = $scope.qxAll;
                   }
               }
               //$scope.nlcz = "1-100"
               $scope.filterAge = function(age) {
                   var ageArr = $scope.nlcz.split("-");
                   if(ageArr[0] == undefined || ageArr[0] == "") {
                       ageArr[0] = 0
                   }
                   if(ageArr[1] == undefined || ageArr[1] == "") {
                       ageArr[1] = 100
                   }

                   if(age >= ageArr[0] && age <= ageArr[1]) {
                       return true;
                   } else {
                       return false;
                   }
               }

           });
       </script>
   </head>

   <body ng-app="myApp" ng-controller="myCtrl">
       姓名查找<input type="text" ng-model="xmcz" /> 年龄查找：
       <select ng-model="nlcz">
           <option value="">年龄查找</option>
           <option>1-10</option>
           <option>10-20</option>
           <option>20-30</option>
           <option>30-40</option>
       </select>
       性别查找：
       <select ng-model="xbcz">
           <option value="">--请输入选择--</option>
           <option>男</option>
           <option>女</option>
       </select>
       <button ng-click="qbsc()">删除全部</button>
       <button ng-click="plsc()">批量删除</button>
       <table border="1">
           <thead>
               <tr>
                   <th>全选<input type="checkbox" ng-click="qx()" ng-model="qxAll" /></th>
                   <th>序号</th>
                   <th>姓名</th>
                   <th>密码</th>
                   <th>年龄</th>
                   <th>性别</th>
                   <th>操作</th>
               </tr>
           </thead>
           <tbody>
               <tr ng-repeat="pro in products |filter:{name:xmcz}|filter:{sex:xbcz}" ng-show="filterAge(pro.age)">
                   <td><input type="checkbox" ng-model="pro.ck" /></td>
                   <td>{{pro.id}}</td>
                   <td>{{pro.name}}</td>
                   <td>{{pro.pwd}}<span ng-show="xg"><input type="text" ng-model="pro.pwd" /><button ng-click="xg=false">保存</button></span></td>
                   <td>{{pro.age}}</td>
                   <td>{{pro.sex}}</td>
                   <td><button ng-click="xg=true">修改密码</button></td>
               </tr>

           </tbody>
       </table>
       <br /><br />
       <button ng-click="tjyh()" ng-model="tjyh">添加用户</button>
       <table border="1" ng-show="yc">
           <tr>
               <td>姓名：</td>
               <td>
                   <input type="text" placeholder="请输入姓名" ng-model="name" />
                   <span ng-show="regName">姓名不能为空</span>
               </td>
           </tr>
           <tr>
               <td>密码：</td>
               <td>
                   <input type="text" placeholder="请输入密码" ng-model="pwd" />
                   <span ng-show="regPwd">密码不能为空</span>
               </td>
           </tr>
           <tr>
               <td>年龄：</td>
               <td>
                   <input type="text" placeholder="请输入年龄" ng-model="age" />
                   <span ng-show="regAge">年龄不能为空</span>
               </td>
           </tr>
           <tr>
               <td>性别：</td>
               <td>
                   <input type="text" placeholder="请输入性别" ng-model="sex" />
                   <span ng-show="regSex">性别不能为空</span>
               </td>
           </tr>
           <tr align="center">
               <td colspan="2"><button ng-click="tj()" ng-model="tjm">提交</button></td>
           </tr>

       </table>

   </body>