javascript - ngrepeat 与表格一致编辑

Question

我试图允许重命名一行中的项目。我知道使用 $scope.editMode 等，但我意识到，当我将其用于 ng-repeats 时，我将列表中的所有条目都视为可编辑，而不是特定索引。这是我的 Html 中的内容:

      <li ng-repeat="playlist in myPlaylist">

        <a href="" data-ng-hide="editPlaylist">{{playlist.name}}</a>

          <form data-ng-show="editPlaylist" data-ng-submit="renamePlaylist()">
            <input data-ng-model="editablePlaylistName">
              </form>
      </li>

我的 Controller 使用上下文菜单设置，如下所示:

 $scope.editPlaylist =false;

 $scope.menuOptions = [
['Rename', function ($itemScope) {
    $scope.editPlaylist = true;
    $scope.editablePlaylistName = $itemScope.playlist.name;
}]

等等。当我想重命名时，我将隐藏和显示相应地设置为 true/false，但我的问题是列表中的所有项目都是 true，导致每个项目都有多个输入字段。我将如何只显示列表相应 $index 的输入字段？我关注了类似的帖子AngularJS inline edit inside of ng-repeat ，但无法确定为什么他们只能显示相应 $index 的输入字段。如下图所示:

谢谢

Answer 1

一种方法是在每个可重复项目上设置“编辑”标志。

标记:

<li ng-repeat="playlist in myPlaylist">
  <a data-ng-hide="playlist.isEditMode" ng-click="playlist.isEditMode=true">
    {{playlist.name}}
  </a>
  <form data-ng-show="playlist.isEditMode" data-ng-submit="renamePlaylist()">
    <input data-ng-model="playlist.name">
  </form>
</li>

我不确定我是否理解您的 Controller 代码的作用，但它可能如下所示:

$scope.myPlaylist = [...];
$scope.renamePlaylist = function() {
  //do whatever you do to rename play list 
  this.playlist.isEditMode = false;
};

这是一个plnkr ，希望这有帮助。