ng使用内联编辑重复，如何使第一个(或最后一个）元素的editmode=true

ng-repeat with in-line edit, how to make the first (or last element) have editmode = true?

本文关键字：最后一个 元素 true editmode 第一个 何使 编辑 ng      更新时间：2023-09-26

我有一个ng repeat，它在一些项目上循环，并使用editmode参数在标签和输入字段之间切换，让用户在线编辑值。

现在我希望功能是这样的：当用户按下"添加"按钮时，将创建一个新的空（或默认）项目，该项目的编辑模式设置为true（这样，输入文本框将显示保存按钮，而不是带有编辑按钮的标签）。

我在谷歌上搜索了很多，但到目前为止还没有找到明确的答案（

代码如下：

      <div ng-repeat="todo in todos">
            <span data-ng-hide="editMode">
                {{ todo.name }}
            </span>
            <input type="text" placeholder="{{ todo.name }}" data-ng-show="editMode" data-ng-model="name" data-ng-required />
            <button type="submit" class="btn btn-default btn-xs" data-ng-hide="editMode" ng-click="editMode = true">
                <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="submit" class="btn btn-default btn-xs" data-ng-show="editMode" ng-click="editMode = false; editTodo(todo._id)">
                <span class="glyphicon glyphicon-save"></span>
            </button>
            <button type="button" class="btn btn-default btn-xs" ng-click="deleteTodo(todo._id)">
                <span class="glyphicon glyphicon-remove"></span>
            </button>
        </div>

提前感谢

您可以通过在ng repeat之外添加一个单独的输入元素来保持简单。

Plunker：http://plnkr.co/edit/YDkzgtOSNpqDehnPkpZe?p=preview

在ng repeat下面添加另一个div元素，如下所示：

<div>
    <button ng-show="!addNew" class="btn btn-sm btn-primary" ng-click="addNew=true">Add New</button>
    <br>
    <div ng-show="addNew">
       <input type="text" ng-model="newTodo.name" ng-required />
       <button type="submit" class="btn btn-default btn-xs" ng-click="addNewTodo()">
           <span class="glyphicon glyphicon-ok"></span>
       </button>
       <button type="button" class="btn btn-default btn-xs" ng-click="resetNewTodo()">
           <span class="glyphicon glyphicon-remove"></span>
        </button>
    </div>
</div>

不要将editMode用作范围变量。将其用作todo的对象字段（todo.editMode）。对于新的todo对象，将其设置为true。

ngRepeat为您提供$index-当前位置，$first，$last-因此您可以对照这些位置进行检查，以确定何时到达第一个元素或何时到达最后一个元素。

相关文章：