关于angularjs的xeditable的使用（转载）

dome

html

 1 <div ng-controller="EditableRowCtrl">
 2   <table class="table table-bordered table-hover table-condensed">
 3     <tr style="font-weight: bold">
 4       <td style="width:35%">Name</td>
 5       <td style="width:20%">Status</td>
 6       <td style="width:20%">Group</td>
 7       <td style="width:25%">Edit</td>
 8     </tr>
 9     <tr ng-repeat="user in users">
10       <td>
11         <!-- editable username (text with validation) -->
12         <span editable-text="user.name" e-name="name" e-form="rowform" onbeforesave="checkName($data, user.id)">
13           {{ user.name || 'empty' }}
        </span>
15       </td>
16       <td>
17         <!-- editable status (select-local) -->
18         <span editable-select="user.status" e-name="status" e-form="rowform" e-ng-options="s.value as s.text for s in statuses">
19           {{ showStatus(user) }}
        </span>
21       </td>
22       <td>
23         <!-- editable group (select-remote) -->
24         <span editable-select="user.group" e-name="group" onshow="loadGroups()" e-form="rowform" e-ng-options="g.id as g.text for g in groups">
25           {{ showGroup(user) }}
        </span>
27       </td>
28       <td style="white-space: nowrap">
29         <!-- form -->
30         <form editable-form name="rowform" onbeforesave="saveUser($data, user.id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == user">
31           <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
32             save
          </button>
34           <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
35             cancel
          </button>
37         </form>
38         <div class="buttons" ng-show="!rowform.$visible">
39           <button type="button" class="btn btn-primary" ng-click="rowform.$show()">edit</button>
40           <button type="button" class="btn btn-danger" ng-click="removeUser($index)">del</button>
41         </div>  
42       </td>
43     </tr>
44   </table>
45 
46   <button type="button" class="btn btn-default" ng-click="addUser()">Add row</button>
47 </div>

controller.js

 1 app.controller('EditableRowCtrl', function($scope, $filter, $http) {
  $scope.users = [
    {id: 1, name: 'awesome user1', status: 2, group: 4, groupName: 'admin'},
    {id: 2, name: 'awesome user2', status: undefined, group: 3, groupName: 'vip'},
    {id: 3, name: 'awesome user3', status: 2, group: null}
  ]; 

 8   $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'},
    {value: 3, text: 'status3'},
    {value: 4, text: 'status4'}
  ]; 

15   $scope.groups = [];
  $scope.loadGroups = function() {
    return $scope.groups.length ? null : $http.get('/groups').success(function(data) {
      $scope.groups = data;
    });
  };

22   $scope.showGroup = function(user) {
    if(user.group && $scope.groups.length) {
      var selected = $filter('filter')($scope.groups, {id: user.group});
      return selected.length ? selected[0].text : 'Not set';
    } else {
      return user.groupName || 'Not set';
    }
  };

31   $scope.showStatus = function(user) {
    var selected = [];
    if(user.status) {
      selected = $filter('filter')($scope.statuses, {value: user.status});
    }
    return selected.length ? selected[0].text : 'Not set';
  };

39   $scope.checkName = function(data, id) {
    if (id === 2 && data !== 'awesome') {
      return "Username 2 should be `awesome`";
    }
  };

45   $scope.saveUser = function(data, id) {
    //$scope.user not updated yet
47     angular.extend(data, {id: id});
    return $http.post('/saveUser', data);
  };

51   // remove user
52   $scope.removeUser = function(index) {
    $scope.users.splice(index, 1);
  };

56   // add user
57   $scope.addUser = function() {
    $scope.inserted = {
      id: $scope.users.length+1,
      name: '',
      status: null,
      group: null 
63     };
    $scope.users.push($scope.inserted);
  };
});

本文转载自http://vitalets.github.io/angular-xeditable/#editable-row，仅供参考学习。

__EOF__

本文作者：Jun10ng
本文链接：https://www.cnblogs.com/wangzun/articles/6089024.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！