如何在ng重复作用域内创建属性

How to create a property inside ng-repeat scope

本文关键字：作用域 创建 属性 ng      更新时间：2023-09-26

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

HTML:

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

JavaScript:

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

我知道这个代码是不正确的，因为我将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;
        };
    });

您可以这样使用$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>

演示：https://jsfiddle.net/iRbouh/rftfx7j4/

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

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

JS:

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

如@John的回答所述，为每个项目添加editMode属性。这是正在工作的Plunker:

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];
    };
});

http://jsfiddle.net/Lvc0u55v/7052/

相关文章：