zoukankan      html  css  js  c++  java
  • angularjs学习笔记一之显示数据,修改数据

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <script type="text/javascript" src="js/angular.min.js"></script>
     6 <link rel="stylesheet" href="css/bootstrap.min.css">
     7 </head>
     8 <body ng-app="myApp" ng-controller="userCtrl">
     9 <div class="container">
    10   <h3>Users</h3>
    11   <table class="table table-striped">
    12     <thead>
    13       <tr>
    14         <th>编辑</th>
    15         <th></th>
    16         <th></th>
    17         <td>密码</td>
    18       </tr>
    19     </thead>
    20     <tbody>
    21       <tr ng-repeat="user in users">
    22         <td><button class="btn" ng-click="editUser(user.id)"> <span class="glyphicon glyphicon-pencil"></span>编辑 </button></td>
    23         <td>{{ user.fName }}</td>
    24         <td>{{ user.lName }}</td>
    25       </tr>
    26     </tbody>
    27   </table>
    28   <hr>
    29   <button class="btn btn-success" ng-click="editUser('new')"> <span class="glyphicon glyphicon-user"></span>创建新用户 </button>
    30   <hr>
    31   <h3 ng-show="edit">创建新用户:</h3>
    32   <h3 ng-hide="edit">编辑用户:</h3>
    33   <form class="form-horizontal">
    34     <input type="hidden" ng-model="fuserid" value="" >
    35     <div class="form-group">
    36       <label class="col-sm-2 control-label">名:</label>
    37       <div class="col-sm-10">
    38         <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="名">
    39       </div>
    40     </div>
    41     <div class="form-group">
    42       <label class="col-sm-2 control-label">姓:</label>
    43       <div class="col-sm-10">
    44         <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="姓">
    45       </div>
    46     </div>
    47     <div class="form-group">
    48       <label class="col-sm-2 control-label">密码:</label>
    49       <div class="col-sm-10">
    50         <input type="password" ng-model="passw1" placeholder="密码">
    51       </div>
    52     </div>
    53     <div class="form-group">
    54       <label class="col-sm-2 control-label">重复密码:</label>
    55       <div class="col-sm-10">
    56         <input type="password" ng-model="passw2" placeholder="重复密码">
    57       </div>
    58     </div>
    59   </form>
    60   <hr>
    61   <button class="btn btn-success" ng-click="saveUser(fuserid)"> <span class="glyphicon glyphicon-save"></span>保存修改 </button>
    62 </div>
    63 <script src="js/ngjs/myUser.js"></script>
    64 </body>
    65 </html>
     1 angular.module('myApp', []).controller('userCtrl', function($scope) {
     2 $scope.fName = '';
     3 $scope.lName = '';
     4 $scope.passw1 = '';
     5 $scope.passw2 = '';
     6 $scope.users = [
     7 {id:1, fName:'Hege', lName:"Pege"},
     8 {id:2, fName:'Kim',  lName:"Pim"},
     9 {id:3, fName:'Sal',  lName:"Smith"},
    10 {id:4, fName:'Jack', lName:"Jones"},
    11 {id:5, fName:'John', lName:"Doe"},
    12 {id:6, fName:'Peter',lName:"Pan"}
    13 ];
    14 $scope.edit = true;
    15 $scope.error = false;
    16 $scope.incomplete = false;
    17 
    18 $scope.editUser = function(id) {
    19   if (id == 'new') {
    20     $scope.edit = true;
    21     $scope.incomplete = true;
    22     $scope.fName = '';
    23     $scope.lName = '';
    24     } else {
    25     $scope.edit = true;
    26     $scope.fName = $scope.users[id-1].fName;
    27     $scope.lName = $scope.users[id-1].lName;
    28     $scope.fuserid = id;
    29   }
    30 };
    31 
    32 $scope.saveUser = function(id) {
    33   if (id == 'new') {    
    34     //    
    35     } else {
    36     $scope.users[id-1].fName = $scope.fName;
    37     $scope.users[id-1].lName = $scope.lName;
    38   }
    39 };
    40 
    41 $scope.$watch('passw1',function() {$scope.test();});
    42 $scope.$watch('passw2',function() {$scope.test();});
    43 $scope.$watch('fName', function() {$scope.test();});
    44 $scope.$watch('lName', function() {$scope.test();});
    45 
    46 $scope.test = function() {
    47   if ($scope.passw1 !== $scope.passw2) {
    48     $scope.error = true;
    49     } else {
    50     $scope.error = false;
    51   }
    52   $scope.incomplete = false;
    53   if ($scope.edit && (!$scope.fName.length ||
    54   !$scope.lName.length ||
    55   !$scope.passw1.length || !$scope.passw2.length)) {
    56      $scope.incomplete = true;
    57   }
    58 };
    59 
    60 });

    看教程显示了数据,但是点击修改的时候,按钮是禁用掉的。就想着自己试试修改数据。

    学习心得:

    获取对应的ID,修改id行的值。在html页面增加一个隐藏域存入ID值。

    如有更好的办法可在评论区告诉我哦!^_^

  • 相关阅读:
    NOIP2011 D1T1 铺地毯
    NOIP2013 D1T3 货车运输 倍增LCA OR 并查集按秩合并
    POJ 2513 trie树+并查集判断无向图的欧拉路
    599. Minimum Index Sum of Two Lists
    594. Longest Harmonious Subsequence
    575. Distribute Candies
    554. Brick Wall
    535. Encode and Decode TinyURL(rand and srand)
    525. Contiguous Array
    500. Keyboard Row
  • 原文地址:https://www.cnblogs.com/webQdesign/p/5757822.html
Copyright © 2011-2022 走看看