javascript - Angularjs $scope - 如何通过 Controller 获得正确的范围(初学者)

Question

我无法理解如何使用 Controller 在页面上显示/隐藏元素。

有一个带有示例的代码 - 您可以通过单击“关闭编辑”按钮来检查它(什么也不会发生):

var appModule = angular.module('appModule', []);

appModule.controller('appCtrl', ['$scope',
  function($scope) {
    $scope.items = [1, 2, 3, 4, 5]

    $scope.closeEdit = function(index, newValue) {
      $scope.isEditing = false; // here I would like to close editing option but it doesn't work
      //$scope.items[index] = newValue; // in next step I would like to update "item" value with new one but it doesn't work correctly
    };
  }
]);

table td:first-child,
input {
  width: 100px;
}
table td {
  border: 1px solid silver;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<table ng-controller="appCtrl">
  <tr ng-repeat="item in items">
    <td>
      <div>
        <span ng-hide="isEditing"> <!-- should hide when editing and update after it with new value  -->
                    {{item}}
                </span>

        <input ng-show="isEditing" type="text" ng-model="newValue" placeholder="{{item}}" />
        <!-- should show when editing  -->
      </div>
    </td>
    <td>
      <button ng-hide="isEditing" ng-click="isEditing = !isEditing">OPEN EDIT</button>
      <!-- should hide when editing  -->
      <button ng-show="isEditing" ng-click="closeEdit($index, newValue)">close edit</button>
      <!-- should show when editing  -->
    </td>
  </tr>
</table>

我想通过 Controller 更改值“isEditing”。通过这样的 HTML 来实现是没有问题的

ng-click="isEditing = !isEditing"

但是下面的代码在 Controller 中无法正常工作:

$scope.isEditing = false;

其目的是显示/隐藏按钮/字段以提供新值。

之后更新新值可能会出现问题。

如果你能解释一下 - 非常感谢。

Answer 1

这是因为 ng-repeat 创建了新的子作用域，并且您正在该作用域中更改 isEditing 变量。要修复它，请在分配中指定 Controller :

ng-click="appCtrl.isEditing = !appCtrl.isEditing"

这里是jsFiddle