以可编辑状态添加新行

时间:2017-02-16 17:36:41

标签: angularjs angularjs-ng-repeat inline-editing

我有一个简单的转发器,每行可以在线编辑。作为转发器的一部分,当我添加一个新行时,我希望它处于可编辑状态,而不是静态。当我尝试将$ scope.editable = true添加到添加按钮时,它会使整个转发器可编辑。

这是一个说明我的代码的plunker: http://plnkr.co/edit/tVOLYm2mg5be2L6NpM6k?p=preview

$scope.addRow = function() {
    $scope.accounts.unshift({ name: 'Enter Name', id: 'Enter ID', code: 'Enter Code'});
    //$scope.editable = true;
}

任何人都可以协助我想要完成的事情吗?

感谢

1 个答案:

答案 0 :(得分:1)

$scope.editable = false;

此语句设置父范围中的可编辑值,ng-repeat为每个重复设置子范围。 你需要了解这个概念。 Look at this question了解这一点。

现在,实现您要执行的操作的更好方法是向帐户数组中的每个帐户对象添加一个新属性,使行可编辑或不可编辑。

因此,无论何时取消帐户,请按以下步骤操作:

 $scope.accounts.unshift({
      name: 'Enter Name',
      id: 'Enter ID',
      code: 'Enter Code',
      editable: true
  });

并在html中,使用editable

而不是使用account.editable

您不需要将editable属性添加到现有数据中,因为不存在的属性是隐式错误的,因此您的网格最初将自动处于不可编辑模式。