Javascript 如何在ng repeat范围内创建属性

我正在尝试创建一个可编辑的项目列表。每个项目都有一个编辑模式

HTML:

我知道此代码不正确，因为我将

editMode

附加到控制器作用域，而不是

ngRepeat

作用域。有了这段代码，每当我点击任何按钮时，所有项目都将进入编辑模式

---

我只希望每个项目在其作用域中都有自己的

editMode

属性，以便我可以单独编辑它们。

将您的属性放在每个项目上：

<ul ng-controller="ItemCtrl">
    <li ng-repeat="item in items">
        <div class="edit-off" ng-hide="item.editMode">...</div>
        <div class="edit-on" ng-show="item.editMode">...</div>

        <button ng-click="toggleEdit(item)">Edit</button>
    </li>
</ul>


angular.module("app", [])
    .controller("ItemCtrl", function($scope) {
        $scope.items = [...]; // list of items

        $scope.toggleEdit = function(item) {
            item.editMode = !item.editMode;
        };
    });

...
...
编辑


角度模块（“应用程序”，[]）
.controller（“ItemCtrl”，函数（$scope）{
$scope.items=[…]；//项目列表
$scope.toggleEdit=函数（项）{
item.editMode=！item.editMode；
};
});

您可以像这样使用

$index

：

angular.module("app", [])
    .controller("ItemCtrl", function($scope) {
        $scope.items = [...]; // list of items
        $scope.editMode = [];

        $scope.toggleEdit = function(index) {
            $scope.editMode[index] = !$scope.editMode[index];
        };
    });

HTML:

<ul ng-controller="ItemCtrl">
    <li ng-repeat="item in items">
        <div class="edit-off" ng-hide="editMode[$index]">...</div>
        <div class="edit-on" ng-show="editMode[$index]">...</div>

        <button ng-click="toggleEdit($index)">Edit</button>
    </li>
</ul>

...
...
编辑

---

演示：

您可以在每个项目中添加属性并使用它进行编辑

 $scope.items = [{name: 'misko', gender: 'male'},{name: 'misko1', gender: 'male'}];

  angular.forEach($scope.items, function(obj) {
    obj["editMode"] = false
  });

鉴于

<ul ng-controller="ItemCtrl">
    <li ng-repeat="item in items">
        <div class="edit-off" ng-hide="editMode[$index]">...</div>
        <div class="edit-on" ng-show="editMode[$index]">...</div>

        <button ng-click="item.editMode = !item.editMode">Edit</button>
    </li>
</ul>

...
...
编辑

使用$index

HTML:

<ul ng-controller="ItemCtrl">
    <li ng-repeat="item in items track by $index">
        <div class="edit-off" ng-hide="editMode">...</div>
        <div class="edit-on" ng-show="editMode">...</div>

        <button ng-click="toggleEdit($index)">Edit</button>
    </li>
</ul>

---

将editMode属性添加到每个项目中，如@John的答案中所述。 以下是工作流程：

---

有很多方法可以实现这一点，请参见示例：

<ul ng-controller="ItemCtrl">
<li ng-repeat="item in items">
    <div class="edit-off" ng-hide="editMode[$index]">{{editMode[$index]}}</div>
    <div class="edit-on" ng-show="editMode[$index]">{{editMode[$index]}}</div>

    <button ng-click="toggleEdit($index)">Edit</button>
</li>

---

事实上，我最终需要使用

angular.toJson（）

将数据放入json中，因此在每个项目上使用额外的道具，如

editMode

，我如何摆脱它们？您可以使用另一个对象来维护状态，就像其他一些答案一样，或者只需在序列化对象之前执行

delete item.editMode

，在编辑列表（如添加和删除项）后，此操作是否有效？美元指数也会改变吗？

<ul ng-controller="ItemCtrl">
    <li ng-repeat="item in items track by $index">
        <div class="edit-off" ng-hide="editMode">...</div>
        <div class="edit-on" ng-show="editMode">...</div>

        <button ng-click="toggleEdit($index)">Edit</button>
    </li>
</ul>

angular.module("app", [])
    .controller("ItemCtrl", function($scope) {
        $scope.items = [...]; // list of items

        $scope.toggleEdit = function($index) {
            setEditMode($scope.items[$index]);
        };
    });

function setEditMode(item) {
    item.editMode = false;
}

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
   $scope.items = [
      { id:2, ds: 'test1' },
      { id:2, ds: 'test2' },
      { id:2, ds: 'test3'}]; // list of items


        $scope.toggleEdit = function($index) {
            $scope.items[$index].editMode = !$scope.items[$index].editMode;
        };
});

<ul ng-controller="ItemCtrl">
<li ng-repeat="item in items">
    <div class="edit-off" ng-hide="editMode[$index]">{{editMode[$index]}}</div>
    <div class="edit-on" ng-show="editMode[$index]">{{editMode[$index]}}</div>

    <button ng-click="toggleEdit($index)">Edit</button>
</li>

var myApp = angular.module("myApp", [])
.controller("ItemCtrl", function($scope) {
    $scope.items = ["aaa","bbb","ccc"]; // list of items
    $scope.editMode = [true,true,true];

    $scope.toggleEdit = function(index) {
        $scope.editMode[index] = !$scope.editMode[index];
    };
});