xeditable行中的xeditable检查表

xeditable checklist inside xeditable row

本文关键字：xeditable 检查表      更新时间：2023-12-15

我正试图在可编辑行中基于xeditable示例实现检查表状态。遗憾的是，列表不起作用。当行被禁用时，它显示当前状态，当它处于编辑模式时，它会显示所有选项，但选中的状态不会被选中。我不知道如何将复选框与当前的$scope.user.status对象正确连接。。

脚本：

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/

谢谢。

过了一段时间我意外得到了答案..：）
我刚刚错过了xeditable要求whitch使检查表工作的检查表模型指令！！

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

雇佣它。使用行中有检查表的可编辑表。http://jsfiddle.net/NfPcH/11472/

欢呼

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

原始代码：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) }}

这对我很有效。

相关文章：