html 代码
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title > 工作人员登记 </title>
- <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/CSS/bootstrap.min.css">
- <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
- <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
- <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
- <style>
- table{
- margin-top: 30px;
- }
- .table>tbody>tr>td,
- .table>thead>tr>th{text-align: center;vertical-align: middle}
- .modal-body{padding-left:50px;}
- .input-group{width:300px;float:right;}
- </style>
- </head>
- <body ng-app="myApp" ng-controller="userCtrl">
- <div class="container">
- <h3 > 工作人员登记表 </h3>
- <hr/>
- <div>
- <div class="input-group">
- <input type="text" class="form-control" placeholder="请输入要搜索的信息" ng-model="search" />
- <span class="input-group-addon"> 搜索 </span>
- </div>
- <button class="btn" ng-click="editUser('new')" data-toggle="modal" data-target="#myModal">
- <span class="glyphicon glyphicon-user"></span > 创建新用户
- </button>
- </div>
- <hr/>
- <table class="table table-striped table-bordered table-responsive">
- <thead>
- <tr>
- <th > 姓名 </th>
- <th > 年龄 </th>
- <th > 联系方式 </th>
- <th > 编号 </th>
- <th > 编辑 </th>
- <th > 操作 </th>
- </tr>
- </thead>
- <tbody>
- <tr ng-repeat="user in users | filter:search">
- <td>{{user.name}}</td>
- <td>{{user.age}}</td>
- <td>{{user.phone}}</td>
- <td>{{user.id}}</td>
- <td>
- <button class="btn" ng-click="editUser(user)" data-toggle="modal" data-target="#myModal">
- <span class="glyphicon glyphicon-pencil"></span > 编辑
- </button>
- </td>
- <td><button class="btn" ng-click="deleteUser(user.name)"> 删除 </button></td>
- </tr>
- </tbody>
- </table>
- <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
- <h3 ng-show="edit" class="modal-title" id="myModalLabel"> 创建新用户:</h3>
- <h3 ng-hide="edit" class="modal-title" id="myModalLabel"> 编辑用户:</h3>
- </div>
- <div class="modal-body">
- <form class="form-horizontal" name="myForm">
- <div class="form-group">
- <label > 姓 & nbsp; 名:</label>
- <input type="text" name="userName" ng-model="userName" required />
- <span style="color:red" ng-show="myForm.userName.$invalid">
- <span ng-show="myForm.userName.$error.required">* 用户名必填 </span>
- </span>
- </div>
- <div class="form-group">
- <label > 年 & nbsp; 龄:</label>
- <input type="text" ng-model="userAge"/><br/>
- </div>
- <div class="form-group">
- <label > 联系方式:</label><input type="text" name="userPhone" ng-model="userPhone" required/>
- <span style="color:red" ng-show="myForm.userPhone.$invalid">
- <span ng-show="myForm.userPhone.$error.required">* 联系方式必填 </span>
- </span>
- </div>
- </form>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default" data-dismiss="modal"> 关闭 </button>
- <button type="button" class="btn btn-primary" ng-click="save()" ng-disabled="myForm.userName.$error.required || myForm.userPhone.$error.required"> 保存数据 </button>
- </div>
- </div><!-- /.modal-content -->
- </div><!-- /.modal -->
- </div>
- </div>
- <script>
- var app = angular.module("myApp",[]);
- app.controller("userCtrl",function($scope){
- $scope.formInit=function(){
- $scope.userName="";
- $scope.userAge="";
- $scope.userPhone="";
- }
- // $scope.userPsw1="";
- // $scope.userPsw2="";
- $scope.users=[
- {name:"周杰伦",age:33,phone:"13512345678",id:1},
- {name:"罗志祥",age:29,phone:"1351xx45678",id:2},
- {name:"黄宗泽",age:31,phone:"13xxxx45678",id:3},
- {name:"黄渤",age:42,phone:"135xxx45678",id:4},
- {name:"蔡依林",age:31,phone:"1xxxxx45678",id:5},
- {name:"鹿晗",age:27,phone:"135123xxx78",id:6},
- {name:"迪丽热巴",age:26,phone:"135xxxx5678",id:7},
- {name:"薛之谦",age:29,phone:"13512xxx678",id:8},
- {name:"林俊杰",age:30,phone:"13512345xxx",id:9},
- {name:"成龙",age:62,phone:"1351234xxxx",id:10},
- {name:"曾志伟",age:58,phone:"1xxx2345678",id:11}
- ];
- $scope.count = $scope.users.length;
- $scope.edit = true;
- $scope.editUser = function(user){
- if(user == 'new'){
- $scope.formInit();
- $scope.edit = true;
- }else{
- $scope.userName=user.name;
- $scope.userAge=user.age;
- $scope.userPhone=user.phone;
- $scope.id=user.id;
- $scope.edit=false;
- }
- };
- $scope.save=function(id){
- if($scope.edit == true){
- $scope.count++;
- $scope.newUser={
- name:$scope.userName,
- age:$scope.userAge,
- phone:$scope.userPhone,
- id:$scope.count
- };
- $scope.users.push($scope.newUser);
- }else{
- // for(var i=0;i<$scope.users.length;i++){
- // if($scope.users[i].id == $scope.id){
- // $scope.users[i].name = $scope.userName;
- // $scope.users[i].age = $scope.userAge;
- // $scope.users[i].phone = $scope.userPhone;
- // }
- // }
- $scope.users.forEach(function(user,i){
- if($scope.users[i].id == $scope.id){
- $scope.users[i].name = $scope.userName;
- $scope.users[i].age = $scope.userAge;
- $scope.users[i].phone = $scope.userPhone;
- }
- });
- // $scope.users[$scope.id-1].name = $scope.userName;
- }
- $scope.edit=true;
- $scope.formInit();
- $('#myModal').modal('hide');
- };
- $scope.deleteUser=function(userName){
- $scope.users.forEach(function(user,index,list){
- if(user.name == userName){
- list.splice(index,1);
- }
- });
- }
- });
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/45107/f0dcde92b0bcf4a78e85860dbc0f5209.html