made

来源：互联网发布：nginx 修改默认路径编辑：程序博客网时间：2024/05/21 17:21

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8" />
       <title></title>
       <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
       <style type="text/css">
           tr:nth-of-type(odd) {
               background: red;
           }

           tr:nth-of-type(even) {
               background: yellow;
           }

           a {
               text-decoration: none;
           }
       </style>
   </head>

   <body ng-app="myApp" ng-controller="myCtrl">

       <input type="text" ng-model="name" class="cha" />
       <select ng-change="change()" ng-model="age" ng-init="age=ages[0]">
           <option ng-repeat="x in ages">{{x}}</option>
       </select>
       <table border="1px">

           <tr style="background: gray;">
               <th>姓名</th>
               <th>年龄</th>
               <th>拼音</th>
               <th>职位</th>
               <th>操作</th>
           </tr>
           <tr ng-repeat="person in persons">
               <th>{{person.name}}</th>
               <th>{{person.age}}</th>
               <th>{{person.pin}}</th>
               <th>{{person.zhiwei}}</th>
               <th><a href="#" ng-click="dele($index)">删除</a></th>
           </tr>
       </table>
       <input type="button" value="查询" ng-click="cha()" />
       <input type="button" value="添加" ng-click="xianshi()"/>
       <hr />
       <fieldset ng-show="xs">
           <legend>添加用户信息</legend>
           姓名:<input type="text" ng-model="name1"/><br>
           年龄:<input type="text" ng-model="age1"/><br>
           拼音:<input type="text" ng-model="pin1"/><br>
           职位:<input type="text" ng-model="zhiwei1"/><br>
           <input type="button" value="保存" ng-click="add()"/>
       </fieldset>
       <script type="text/javascript">
           var mo = angular.module("myApp", []);
           mo.controller("myCtrl", function($scope) {

               $scope.ages = ["按年龄正序排序", "按年龄倒序排列"];
               //定义数组
               $scope.persons = [{
                   "name": "张三",
                   "age": 22,
                   "pin": "zhnagsan",
                   "zhiwei": "总经理"
               }, {
                   "name": "李四",
                   "age": 20,
                   "pin": "lisi",
                   "zhiwei": "总经理"
               }, {
                   "name": "杨过",
                   "age": 25,
                   "pin": "yangguo",
                   "zhiwei": "总经理"
               }];
               //排序
               $scope.change = function() {
                       var a1 = $scope.age;
                       console.log("--" + a1);
                       if (a1 == "按年龄倒序排列") {
                           console.log(a1 + "----")
                           $scope.persons.sort(function(a, b) {

                               return b.age - a.age;

                           });
                       } else {
                           $scope.persons.sort(function(a, b) {

                               return a.age - b.age;

                           });
                       }
                   }
                   //查询
               $scope.cha = function() {
                   //每次查询的时候，为了防止第二次失败，需要充值数组
                   $scope.persons = [{
                       "name": "张三",
                       "age": 22,
                       "pin": "zhnagsan",
                       "zhiwei": "总经理"
                   }, {
                       "name": "李四",
                       "age": 20,
                       "pin": "lisi",
                       "zhiwei": "总经理"
                   }, {
                       "name": "杨过",
                       "age": 25,
                       "pin": "yangguo",
                       "zhiwei": "总经理"
                   }];
                   //新数组
                   var newPersons = [];
                   var n = $scope.name;
                   if (n == "") {
                       alert("名字不能为空")
                       return;
                   }
                   //遍历
                   for (var i = 0; i < $scope.persons.length; i++) {

                       var n1 = $scope.persons[i].name;
                       if (n == n1) {
                           newPersons.push($scope.persons[i]);
                       }

                   }
                   //判断
                   if (newPersons.length == 0) {
                       alert("没有匹配项");
                       return;
                   }
                   $scope.persons = newPersons;
               }
               //删除
               $scope.dele = function($index){


                   $scope.persons.splice($index,1);

                   return false;
               }
               //控制显示/隐藏
               $scope.xianshi = function(){
                   $scope.xs = true;
               }
               //保存
               $scope.add = function(){
                   //创建对象
                   var obj = {
                       "name": $scope.name1,
                       "age": $scope.age1,
                       "pin": $scope.pin1,
                       "zhiwei": $scope.zhiwei1
                   };
                   $scope.persons.push(obj);
                   //隐藏掉
                   $scope.xs = false;
               }
           })
       </script>
   </body>

</html>

阅读全文

0 0