可编辑行内的可编辑清单

Question

我正在尝试根据可编辑示例在可编辑行内实现清单状态。不幸的是列表不起作用。当行被禁用时它显示当前状态，当它处于编辑模式时显示所有选项，但不检查选定的状态。我不知道如何将复选框与当前的 $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

通过更改以下代码，它应该可以工作。

Original code: e-ng-options="s.value as s.text for s in statuses"> {{ showStatus(user) }}

Corrected code : e-ng-options="s as s.text for s in statuses"> {{ showStatus(user) }}

这对我有用。

Answer 2

过了一段时间我偶然得到了答案..:)
我只是错过了 Checklist-model directive xeditable 需要 whitch 才能使清单工作！！

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

雇用它。工作 xeditable table 与行中的清单。 http://jsfiddle.net/NfPcH/11472/

干杯

可编辑行内的可编辑清单

xeditable checklist inside xeditable row

javascript

angularjs

x-editable