angular增删查+css

最新推荐文章于 2018-08-04 16:10:43 发布

深渊咆哮

最新推荐文章于 2018-08-04 16:10:43 发布

阅读量234

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/sj_lpl_sb/article/details/78813004

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8" />
       <title>月考模拟</title>
       <script type="text/javascript" src="js/angular.min.js"></script>
       <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
       <style>
           body {
               background: url(img/a.bmp.jpg) no-repeat;
               background-repeat-x: 100%
           }

           li {
               float: left;
               list-style: none;
               margin-left: 170px;
               position: relative;
           }

           #title {
               background-color: chocolate;
           }

           #tab tr:nth-child(odd) {
               background-color: #A2A2A2;
           }

           #tab tr:nth-child(even) {
               background-color: #DDDDDD;
           }

           #tab tr:hover {
               background-color: #D589D9;
           }

           a {
               text-decoration: none;
               color: black;
               cursor: pointer;
           }

           #da td:hover {
               cursor: nesw-resize;
           }

           #btn1 {
               width: 100px;
               height: 30px;
               background-color: #E5E5E5;
               cursor: pointer;
               border-radius: 7px;
               position: relative;
               top: 20px;
               left: 50px;
           }

           #btn2 {
               width: 100px;
               height: 30px;
               background-color: #E5E5E5;
               cursor: pointer;
               border-radius: 7px;
               position: relative;
               top: 20px;
               left: 450px;
           }

           fieldset {
               width: 800px;
               position: relative;
               top: 30px;
               left: -10px;
           }

           legend {
               color: chocolate;
           }

           #tab2 th {
               color: darkseagreen;
           }
       </style>
   </head>

   <body ng-app="mapp" ng-controller="mctrl">
       <ul>
           <li style="color:#33CD5F"><b>姓名查询条件</b><input type="text" style="background-color: #B2B2B2;" ng-model="see_name" /></li>
           <li>
               <select style="width:175px;" ng-model="zd" ng-change="chagechecked()">
                   <option>按照年龄倒序排列</option>
                   <option>按照年龄顺序排列</option>
               </select>
           </li>
       </ul>
       <br />
       <br />
       <b style="float: left;position: relative;bottom: 20px;color:lime;">用户列表</b>
       <table id="tab" border="1px" cellspacing="0px" cellpadding="0px" width="800px" style="position: relative;left: -70px;">
           <tr id="title" align="center">
               <td>姓名</td>
               <td>年龄</td>
               <td>拼音</td>
               <td>职位</td>
               <td>操作</td>
           </tr>
           <tr ng-repeat="da in datas " align="center" id="da">
               <td>{{da.name}}</td>
               <td>{{da.age}}</td>
               <td>{{da.pinyin}}</td>
               <td>{{da.zhiwei}}</td>
               <td>
                   <a href="#" ng-click="dele($index)">删除</a>
               </td>
           </tr>
       </table>
       <input type="button" id="btn1" value="查询" ng-click="op()" />
       <input type="button" id="btn2" value="添加用户" ng-click="ishide()" />
       <fieldset ng-show="flag">
           <legend>添加用户信息</legend>
           <table id="tab2">
               <tr>
                   <th>请输入姓名</th>
                   <td><input type="text" ng-model="n_name" /></td>
               </tr>
               <tr>
                   <th>请输入年龄</th>
                   <td><input type="text" ng-model="n_age" /></td>
               </tr>
               <tr>
                   <th>请输入拼音</th>
                   <td><input type="text" ng-model="n_pinyin" /></td>
               </tr>
               <tr>
                   <th>请输入职位</th>
                   <td><input type="text" ng-model="n_zhiwei" /></td>
               </tr>
           </table>
           <input type="button" value="保存" width="200px" style="position: relative; left: 100px;top: 10px;bottom: 20px;" ng-click="insert()" />
       </fieldset>
   </body>
   <script>
       var mode = angular.module("mapp", []);
       mode.controller("mctrl", function($scope) {
           var dd = [{
               "name": "张三",
               "age": 22,
               "pinyin": "zhang_san",
               "zhiwei": "总经理"

           }, {
               "name": "李四",
               "age": 16,
               "pinyin": "li_si",
               "zhiwei": "总监"

           }, {
               "name": "王晓华",
               "age": 36,
               "pinyin": "wang_xiao_hua",
               "zhiwei": "职员"
           }]
           $scope.datas = dd;
           $scope.zd = "按照年龄倒序排列";
           $scope.op = function() {
               var ds = [];
               if($scope.see_name == "" || $scope.see_name == null) {alert("不能为空")} else {
                   for(var i = 0; i < dd.length; i++) {

                       if(dd[i].name == $scope.see_name) {
                           ds.push(dd[i])

                       }
                   }
                   $scope.datas = ds;
               }
           }
           $scope.ishide = function() {
               $scope.flag = !$scope.flag;
           }
           $scope.chagechecked = function() {
               if($scope.zd == "按照年龄顺序排列") {
                   dd.sort(function(a, b) {
                       return a.age - b.age
                   })
               } else if($scope.zd == "按照年龄倒序排列") {
                   dd.sort(function(a, b) {
                       return b.age - a.age
                   })
               }

           }
           $scope.dele = function($index) {

               var i = confirm("确定？");
               if(i) {
                   dd.splice($index, 1);
               }
           }
           $scope.insert = function() {
               var zhig = {
                   "name": $scope.n_name,
                   "age": $scope.n_age,
                   "pinyin": $scope.n_pinyin,
                   "zhiwei": $scope.n_zhiwei
               }
               dd.push(zhig)

           }
       })
   </script>

</html>