xeditable清单里面的xeditable行

  • Z时代
  • 2024-01-10
  • 分类：问答

我试图根据xeditable示例实现可编辑行内的清单状态。不幸的是，列表不起作用。 它显示禁用行时的当前状态以及处于编辑模式时的所有选项，但未选中所选状态。我不知道如何正确连接与当前$ scope.user.statuses对象复选框..xeditable清单里面的xeditable行

脚本：

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/

谢谢。

回答：

我在一段时间后意外得到了答案.. :)
我只是错过了Checklist-model directive是可调整的，以使清单工作！

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

雇用它。在行中使用清单工作xeditable表。 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) }}

这为我工作。

以上是 xeditable清单里面的xeditable行 的全部内容， 来源链接： utcz.com/qa/258857.html

回到顶部