CODEWITHSUNDEEP
javascriptangularjs
mere
mere

Reputation: 67

How to create a property inside ng-repeat scope

I'm trying to make an editable list of items. There is an editing mode of each item.

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

I know that this code isn't correct since I attached editMode to the controller scope, not to ngRepeat scope. With this code, whenever I click at any button, all items will turn into editing mode.

All I want is that every item has its own editMode property in its scope, so that I can edit them individually.

Upvotes: 1

Views: 201

Answers (6)

Joey Etamity
Joey Etamity

Reputation: 866

There are a lots way can implement this, see example:

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

Upvotes: 0

Lucas Segers
Lucas Segers

Reputation: 1

Add the editMode attribute to each item, as said in @John's answer. Here's the working 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;
        };
});

Upvotes: 0

fercaveri
fercaveri

Reputation: 63

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

Upvotes: 0

Deep
Deep

Reputation: 9794

You can add the property in each item and use it to edit.

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

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

in view

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

Upvotes: 0

Ismail RBOUH
Ismail RBOUH

Reputation: 10450

You can use $index like this: 

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>

Demo: https://jsfiddle.net/iRbouh/rftfx7j4/

Upvotes: 1

John
John

Reputation: 17471

put your property on each item:

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

Upvotes: 1

Related Questions