javascript - AngularJS:同时更新 $scope 中的所有对象

Question

假设我有一个对象存储在 $scope 中，如下所示:

$scope.todo = [
  {
    "title" : "Groceries",
    "todoItems" : [
      {
        "title" : "Milk",
        "status" : "Not Done"
      },
      {
        "title" : "Eggs",
        "status" : "Not Done"
      },
      {
        "title" : "Bread",
        "status" : "Done"
      }
    ]
  },
  {
    "title" : "Medical",
    "todoItems" : [
      {
        "title" : "Make eye doctor appointment",
        "status" : "Not Done"
      },
      {
        "title" : "Go to pharmacy",
        "status" : "Not Done"
      },
      {
        "title" : "Take vitamins",
        "status" : "Done"
      }
    ]
  }
];

我正在创建一个允许对每个待办事项进行内联编辑的功能，如下所示:

我通过切换待办事项列表项上名为 editMode 的属性来实现此目的。请参阅以下代码块中的第 11-14 行:

<div ng-app="myApp">
  <div ng-controller="dashBoard">
    <div class="panel panel-default list-[(listID)]" ng-repeat="(listID, todoList) in todo" ng-cloak>
      <div class="panel-heading">[( todoList.title )]</div>
        <ul class="list-group">
          <li ng-repeat="(itemID, todoItem) in todoList.todoItems" data-as-sortable="board.dragControlListeners" data-ng-model="items" class="status-[(todoItem.status)] todo-item todo-item-[(itemID)]" data-as-sortable-item>
            <div class="input-group">
              <span data-as-sortable-item-handle class="input-group-addon">
                <input ng-click="toggleStatus(listID, itemID, todoItem.status)" type="checkbox" ng-checked="todoItem.status == 1">
              </span>
              <span ng-if="!todoItem.editMode" class="todo-item-label-wrapper">
                <div ng-click="toggleEditMode(listID, itemID, 1)" class="todo-item-label">[(todoItem.value)]</div>
              </span>
              <span ng-if="todoItem.editMode" class="todo-input-wrapper">
                <input show-focus="todoItem.editMode" ng-keyup="$event.keyCode == 13 && toggleEditMode(listID, itemID, 0)" type="text" ng-model="todoItem.value" class="form-control">
              </span>
            </div>
          </li>
        </ul>
    </div>
  </div>
</div>

当任何给定的待办事项被点击时，它会进入编辑模式。待办事项一直处于编辑模式，直到用户按下回车键。我想让多个待办事项无法同时处于编辑模式。如果您点击待办事项“foo”，然后点击待办事项“bar”，待办事项“foo”应该切换回只读模式。

我目前通过使用 angular.forEach() 单独切换每个待办事项来实现这一点，例如:

$scope.toggleEditMode = function(listID, itemID, editMode) {
  $scope.todo[listID].todoItems[itemID].editMode = editMode;

  //Turn off edit mode on every todo item other than the one that was just clicked
  angular.forEach($scope.todo[listID].todoItems, function(todoItem, foreignItemID) {
    if (foreignItemID !== itemID) {
      $scope.todo[listID].todoItems[foreignItemID].editMode = 0;
    }
  });
}

但我想知道 Angular 是否对我应该使用的这个用例有一些实用性。

Answer 1

在这种情况下，我所做的不是为每个项目设置 editMode 属性，而是使用范围变量，例如 $scope.currentEditItemId。然后你做这样的事情:

$scope.toggleEditMode = function (listID, itemID, enableEdit) {
    if (enableEdit === 1) {
        $scope.currentEditItemId = itemId;
        // ... whatever you need to do here
    }
}

HTML 看起来像这样:

<span ng-if="itemId != currentEditItemId" class="todo-item-label-wrapper">
    <div ng-click="toggleEditMode(listID, itemID, 1)" class="todo-item-label">[(todoItem.value)]</div>
</span>
<span ng-if="itemId == currentEditItemId" class="todo-input-wrapper">
    <input show-focus="todoItem.id == currentEditItemId" ng-keyup="$event.keyCode == 13 && toggleEditMode(listID, itemID, 0)" type="text" ng-model="todoItem.value" class="form-control">
</span>