ngrepeat根据表单编辑

Question

我正在尝试允许重命名一行中的项目。我知道使用$ scope.editMode等，但我意识到当我将它用于ng-repeats时，我将列表中的所有条目都设置为edditable而不是特定的索引。这是我在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>

我的控制器使用上下文菜单设置：

 $scope.editPlaylist =false;

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

等。当我想重命名时，我正在设置hide并显示为true / false，但我的问题是列表中的所有项都为true，从而为每个项生成了许多输入字段。我该如何只显示列表的相应$索引的输入字段？我跟着类似的帖子AngularJS inline edit inside of ng-repeat，但无法确定为什么他们只能显示相应$ index的输入字段。图像如下所示：

谢谢，

Answer 1

一种方法是设置＆＃39;编辑＆＃39;在每个可重复的项目上标记。

标记：

<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>

我不确定我是否了解您的控制器代码的作用，但这里的内容可能如下：

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

这里是plnkr，希望这有帮助。

Answer 2

在控制器中将blur设置为true并使用

<li ng-repeat="playlist in myPlaylist">
    <input type="text" value="{{playlist.name}}" ng-blur="blur=true;" ng-show="!blur"/>
    <span ng-focus="blur=false;" ng-show="blur">{{playlist.name}}</span>
</li>

另外，不要忘记专注于跨度焦点的输入。对不起在移动设备上写的拼写错误和简短回答。