angular中的增删查

最新推荐文章于 2025-02-26 12:07:59 发布

原创最新推荐文章于 2025-02-26 12:07:59 发布 · 250 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8" />
       <title></title>
       <script src="js/angular.min.js" type="text/javascript" charset="UTF-8"></script>
       <style>
           * {
               margin: 0px auto;
               padding: 0px;
           }

           .main {
               width: 500px;
           }

           #sele {
               margin-left: 100px;
           }

           #tab {
               width: 600px;
           }

           #tab tr td {
               border: solid black 1px;
           }

           #sp {
               margin-left: 380px;
           }
       </style>
   </head>

   <body ng-app="myApp" ng-controller="myCtrl">
       <div class="main">
           姓名查询条件<input type="text" ng-model="name" />
           <select id="sele" ng-change="change()" ng-model="age" ng-init="age=ages[0]">
               <option ng-repeat="x in ages">{{x}}</option>

           </select><br />
       </div>
       <span id="sp">用户列表</span>
       <table id="tab" cellpadding="0px" cellspacing="0px">
           <tr>
               <td>姓名</td>
               <td>年龄</td>
               <td>拼音</td>
               <td>职位</td>
               <td>操作</td>
           </tr>
           <tr ng-repeat="good in persons">
               <td>{{good.name}}</td>
               <td>{{good.age}}</td>
               <td>{{good.pin}}</td>
               <td>{{good.zhiwei}}</td>
               <td>
                   <a href="#" ng-click="dele($index)">删除</a>
               </td>
           </tr>
       </table>

       <button ng-click="cha()" style="margin-left: 480px; margin-top: 50px;">查询</button>
       <input type="button" style="margin-left: 250px;" 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>

   </body>
   <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;
               if(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.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;
           }
           $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;
           }
       })
   </script>

</html>