关于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' }} 14 </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) }} 20 </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) }} 26 </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 33 </button> 34 <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default"> 35 cancel 36 </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) { 2 $scope.users = [ 3 {id: 1, name: 'awesome user1', status: 2, group: 4, groupName: 'admin'}, 4 {id: 2, name: 'awesome user2', status: undefined, group: 3, groupName: 'vip'}, 5 {id: 3, name: 'awesome user3', status: 2, group: null} 6 ]; 7 8 $scope.statuses = [ 9 {value: 1, text: 'status1'}, 10 {value: 2, text: 'status2'}, 11 {value: 3, text: 'status3'}, 12 {value: 4, text: 'status4'} 13 ]; 14 15 $scope.groups = []; 16 $scope.loadGroups = function() { 17 return $scope.groups.length ? null : $http.get('/groups').success(function(data) { 18 $scope.groups = data; 19 }); 20 }; 21 22 $scope.showGroup = function(user) { 23 if(user.group && $scope.groups.length) { 24 var selected = $filter('filter')($scope.groups, {id: user.group}); 25 return selected.length ? selected[0].text : 'Not set'; 26 } else { 27 return user.groupName || 'Not set'; 28 } 29 }; 30 31 $scope.showStatus = function(user) { 32 var selected = []; 33 if(user.status) { 34 selected = $filter('filter')($scope.statuses, {value: user.status}); 35 } 36 return selected.length ? selected[0].text : 'Not set'; 37 }; 38 39 $scope.checkName = function(data, id) { 40 if (id === 2 && data !== 'awesome') { 41 return "Username 2 should be `awesome`"; 42 } 43 }; 44 45 $scope.saveUser = function(data, id) { 46 //$scope.user not updated yet 47 angular.extend(data, {id: id}); 48 return $http.post('/saveUser', data); 49 }; 50 51 // remove user 52 $scope.removeUser = function(index) { 53 $scope.users.splice(index, 1); 54 }; 55 56 // add user 57 $scope.addUser = function() { 58 $scope.inserted = { 59 id: $scope.users.length+1, 60 name: '', 61 status: null, 62 group: null 63 }; 64 $scope.users.push($scope.inserted); 65 }; 66 });
本文转载自http://vitalets.github.io/angular-xeditable/#editable-row，仅供参考学习。
