Question

我有一个像这样的编辑表：

<tr ng-repeat='guest in guestList | orderBy:orderByField:reverseSort'>
   <td><span ng-show='!guest.isedit'>{{guest.firstname}}</span><span ng-show='guest.isedit'><input type="text" ng-model='guest.firstname'/></span></td>
    <td><span ng-show='!guest.isedit'><a href="javascript:void(0)" ng-click='editGuest(guest)'><i class="material-icons">mode_edit</i></a></span><span ng-show='guest.isedit'><button ng-click='contactUpdate(guest)'>OK</button></span></td>
</tr>

在我的控制器中：

$scope.editGuest = function(guest){
        delete $scope.orderByField;  
        guest.isedit = true;   
    };
$scope.contactUpdate = function(guest){
       //Save the change then put the order back to re-order the table
      $scope.orderByField = 'firstname';
}

如您所见，这是一个可编辑的表，如果单击编辑，该表将变为可编辑。我想在编辑时禁用排序，直到用户完成编辑并点击OK按钮（已经保存在服务器中），然后我将使用新数据重新排序。问题是我第一次触发editGuest（guest），它仍会跳转。有什么方法可以实现这个目标吗？

Answer 1

您需要在输入框中使用不同的ng模型，如下所示：

<tr ng-repeat='guest in guestList | orderBy:orderByField:reverseSort'>
   <td>
       <span ng-show='!guest.isedit'>{{guest.firstname}}</span>
       <span ng-show='guest.isedit'><input type="text" value="{{ guest.firstname }}" ng-model='firstname'/></span>//I have set the value to the guest's firstname to default the name when the input box becomes active. You can also use ng-init to achieve it.
</td>
    <td>
        <span ng-show='!guest.isedit'><a href="javascript:void(0)" ng-click='editGuest(guest)'><i class="material-icons">mode_edit</i></a></span>
        <span ng-show='guest.isedit'><button ng-click='contactUpdate(firstname)'>OK</button></span></td>
</tr>

在您的控制器中：

$scope.contactUpdate(guest, name){
    guest.firstname = name;
    name = '';//EDIT
}

Answer 2

首先需要删除绑定。

创建guestList对象的克隆并对其进行编辑操作。

完成后，将克隆对象分配回guestList。

e.g。

var dummyGuestList = angular.copy（guestList）

// dummyGuestList上的一些操作;

guestList = dummyGuestList //assign bacl again

如何在Angularjs中编辑时禁用/启用排序

2 个答案: