xeditable清單裏面的xeditable行

Question

我試圖根據xeditable示例實現可編輯行內的清單狀態。不幸的是，列表不起作用。 它顯示禁用行時的當前狀態以及處於編輯模式時的所有選項，但未選中所選狀態。我不知道如何正確連接與當前$ scope.user.statuses對象複選框..

腳本：

var app = angular.module("app", ["xeditable"]); 

app.run(function(editableOptions) { 
    editableOptions.theme = 'bs3'; 
}); 

app.controller('Ctrl', function($scope, $filter, $http) { 
$scope.users = [ 
    {id: 1, name: 'user1', statuses: [2,3]}, 
    {id: 2, name: 'user2', statuses: [1]}, 
    {id: 3, name: 'user3', statuses: [1,2,3,4]} 
    ]; 

$scope.statuses = [ 
    {value: 1, text: 'status1'}, 
    {value: 2, text: 'status2'}, 
    {value: 3, text: 'status3'}, 
    {value: 4, text: 'status4'} 
]; 
$scope.showStatus = function(user) { 
    var selected = []; 
     angular.forEach($scope.statuses, function(s) { 
      if (user.statuses.indexOf(s.value) >= 0) { 
       selected.push(s.text); 
      } 
     }); 
    return selected.length ? selected.join(', ') : 'Not set'; 
    }; 

    $scope.saveUser = function(data, id) { 
    angular.extend(data, {id: id}); 
    return $http.post('/saveUser', data); 
    }; 

}); 

HTML

<div ng-app="app" ng-controller="Ctrl"> 
    <table class="table table-bordered table-hover table-condensed"> 
    <tr style="font-weight: bold"> 
     <td style="width:30%">Name</td> 
     <td style="width:40%">Status</td> 
     <td style="width:30%">Edit</td> 
    </tr> 
    <tr ng-repeat="user in users"> 
     <td> 
     <!-- editable username (text with validation) --> 
     <span editable-text="user.name" e-name="name" e-form="rowform" e-required> 
      {{ user.name || 'empty' }} 
     </span> 
     </td> 
     <td> 
     <span editable-checklist="user.statuses" e-form="rowform" e-ng-options="s.value as s.text for s in statuses"> 
      {{ showStatus(user) }} 
     </span> 
     </td> 
     <td style="white-space: nowrap"> 
     <!-- form --> 
     <form editable-form name="rowform" onbeforesave="saveUser($data, user.id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == user"> 
      <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary"> 
      save 
      </button> 
      <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default"> 
      cancel 
      </button> 
     </form> 
     <div class="buttons" ng-show="!rowform.$visible"> 
      <button class="btn btn-primary" ng-click="rowform.$show()">edit</button> 
     </div> 
     </td> 
    </tr> 
    </table> 
</div> 

工作的例子就是在這裏 http://jsfiddle.net/NfPcH/6493/

謝謝。

Answer 1

我在一段時間後意外得到了答案.. :)
我只是錯過了Checklist-model directive是可調整的，以使清單工作！

var app = angular.module("app", ["xeditable", "ngMockE2E", "checklist-model"]); 

僱用它。在行中使用清單工作xeditable表。 http://jsfiddle.net/NfPcH/11472/

歡呼

Answer 2

通過更改下面的代碼，它應該工作。

原始代碼：e-ng-options="s.value as s.text for s in statuses"> {{ showStatus(user) }}

更正代碼：e-ng-options="s as s.text for s in statuses"> {{ showStatus(user) }}

這爲我工作。