Angular x editable编辑多行

时间:2016-05-15 11:32:18

标签: javascript angularjs angularjs-directive html-table x-editable

我有一个带有xeditable表的指令,我可以编辑每一行,它可以正常工作。我希望能够使用复选框和编辑选中一次显示多行的行形式。我的解决方案不起作用。

Plunker:https://plnkr.co/edit/MiQnFxcRyoPSb2utv3Qe?p=preview

索引:

    <table class="table table-condensed table-hover">
    <thead>
      <tr>
        <th style="width: 5%">Check</th>
        <th style="width: 5%">id</th>
        <th style="width: 10%">name</th>
        <th style="width: 10%">surname</th>
        <th style="width: 10%">date of birth</th>
        <th style="width: 10%">mobile number</th>
        <th style="width: 30%">adress (city + street + house number)</th>

        <th style="width: 20%" ><button class="btn btn-primary" ng-click="editMany()"> Edit Selected </button> </th>
      </tr>
    </thead>
    <tbody>
      <tr edit-row ng-repeat="obj in users " user = 'obj' track by $index>
      </tr>
    </tbody>
  </table>

网址模板:

<td><input type="checkbox" ng-checked="selected" ng-click="selected = !selected"/>
  <td>
    <!-- id -->
    <span>
      {{ user.id }}
    </span>
  </td>
  <td>
    <!-- editable name -->
    <span editable-text='user.name' e-name='name' e-form='rowform' e-required>
      {{ user.name || 'empty' }}
    </span>
  </td>
  <td>
    <!-- editable surname -->
    <span editable-text='user.surname' e-name='surname' e-form='rowform' e-required>
      {{ user.surname || 'empty' }}
    </span>
  </td>
   <td>
    <!-- editable date_of_birth) -->
    <span editable-text='user.date_of_birth' e-name='date_of_birth' e-form='rowform' e-required>
      {{ user.date_of_birth || 'empty' }}
    </span>
  </td>
   <td>
    <!-- editable mobile_number) -->
    <span editable-text='user.mobile_number' e-name='mobile_number' e-form='rowform' e-required>
      {{ user.mobile_number || 'empty' }}
    </span>
  </td>
  <td>
    <!-- editable city) -->
    <span editable-text="user.address.city" e-name="address.city" e-form="rowform" e-required>{{user.address.city}}</span>
    <!-- editable street) -->
    <span editable-text="user.address.street" e-name="address.street" e-form="rowform" e-required>{{user.address.street}}</span>
    <!-- editable house_number) -->
    <span editable-text="user.address.house_number" e-name="address.house_number" e-form="rowform" e-required>{{user.address.house_number}}</span>
  </td>

  <td style='white-space: nowrap'>
    <!-- form -->
    <form editable-form name='rowform' onbeforesave='saveUser(user)' 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>
      <button class='btn btn-danger' ng-click='remove($index)'>delete</button>
    </div>  
  </td>

指令:

angular.module("app").directive("editRow", function(UsersFactory, UserFactory) {
return {
    templateUrl: '/directives/EditableTable.html',
    scope: {
        user: '='
    },
    restrict: 'EA',
    link: function ($scope, element, $attrs) {
            $scope.editMany = function() {
                if ($scope.selected) {
                    $scope.rowform.$show();
                    $scope.selected = false;        
                }
            };
        }
    };
});

为什么不显示所选行的行形式?

0 个答案:

没有答案