Question

如果看看这个plunker Example

angular.module('testapp', [])
    .controller('testcontroller',function ($scope) {
        $scope.persons = [{ FirstName: 'John', LastName: 'Doe' }, { FirstName: 'Peter', LastName: 'mal' }];

        $scope.onEdit = function ()
        {
            this.isInEditMode = true;
        }

        $scope.onCancel = function () {
            this.isInEditMode = false;
        }

        $scope.addnew = function ()
        {
            this.isInEditMode = false;
        }
    })

    <table>
        <tr>
            <th>Fname</th>
            <th>Lname</th>
        </tr>

        <tr ng-repeat="person in persons">
            <td><input type="text" ng-model="person.FirstName" ng-disabled="!isInEditMode" /></td>
            <td><input type="text" ng-model="person.LastName" ng-disabled="!isInEditMode" /></td>
            <td><input type="button" class="btn-primary" value="Edit" ng-click="onEdit()" /></td> 
            <td><input type="button" class="btn-primary" value="Cancel" ng-click="onCancel()" /></td> 
        </tr>

    </table>
    <input type="button" value="add" ng-click="addnew()"/>
</div>

我正在处理中 this.isInEditMode =真在编辑按钮单击并在取消按钮单击时为false。我试图在点击addnew时使isInEditMode = false。我无法做到这一点可以帮助如何处理这个问题。如果我创建$ scope.isInEditMode它将启用/禁用我不想要的所有行。

Answer 1

如果您将变量放入此中，则应在视图中调用它，如下所示：

angular.module('testapp', [])
    .controller(function testcontroller ($scope) {
          var vm = this;
        $scope.persons = [{ FirstName: 'John', LastName: 'Doe' }, { FirstName: 'Peter', LastName: 'mal' }];

        $scope.onEdit = function ()
        {
            vm.isInEditMode = true;
        }

        $scope.onCancel = function () {
            vm.isInEditMode = false;
        }

        $scope.addnew = function ()
        {
            vm.isInEditMode = false;
        }
    })

    <table>
        <tr>
            <th>Fname</th>
            <th>Lname</th>
        </tr>

        <tr ng-repeat="person in persons">
            <td><input type="text" ng-model="person.FirstName" ng-disabled="!testcontroller.isInEditMode" /></td>
            <td><input type="text" ng-model="person.LastName" ng-disabled="!testcontroller.isInEditMode" /></td>
            <td><input type="button" class="btn-primary" value="Edit" ng-click="onEdit()" /></td> 
            <td><input type="button" class="btn-primary" value="Cancel" ng-click="onCancel()" /></td> 
        </tr>

    </table>
    <input type="button" value="add" ng-click="addnew()"/>
</div>

Answer 2

您可以为每个人添加isInEditMode属性，他们只需将所有这些属性设置为false。

$scope.onCancel = function () {
  $scope.persons.forEach(function (person) {
    person.isInEditMode = false;
  });
}

$scope.addnew = function () {
  this.isInEditMode = false;

  $scope.onCancel();
}

我用你的解决方案分配你的plunker： https://plnkr.co/edit/pyBEuj79wIV2pcYRq2Lh?p=preview

Angular这个范围被称为外部

2 个答案: