CODEWITHSUNDEEP
javascriptangularjs
Akhilendra
Akhilendra

Reputation: 1167

how to differentiate scope when you using ng-repeat multiple time in a page with same data

CodePen is here

I want different scope for business and consumers field. currently it apply for both. It should be when user click on consumers check box show input field, as well as with business. 

<div ng-app="DataEntryApp" ng-controller="DataEntryController">
    <div>
        <labes> Products for consumers </label>
            <li ng-repeat="item in INDproducttypes">
                <span>{{ item.value}}</span>
                <input type="checkbox" ng-model="item.status" />
            </li>
            <label>--------------------------------------</label>
            </br>
            <label> Products for business </label>
            <li ng-repeat="item in INDproducttypes">
                <span>{{ item.value}}</span>
                <input type="checkbox" ng-model="item.status" />
            </li>
    </div>

    <div ng-repeat="item in INDproducttypes">
        <div ng-show="item2.status">
            <input type="text" name="name">
        </div>
    </div>
    <div ng-repeat="item in INDproducttypes">
        <div ng-show="item.status">
            <input type="text" name="name">
        </div>
    </div>
</div>

My controller page 

var myApp = angular.module("DataEntryApp", []);

myApp.controller("DataEntryController", function($scope) {
  $scope.INDproducttypes = [{
    "id": 1,
    "value": "Term Loans",
    "status": false
  }, {
    "id": 2,
    "value": "Lines of Credit",
    "status": false
  }, {
    "id": 3,
    "value": "Credit Card self-issued",
    "status": false
  }, {
    "id": 4,
    "value": "Mortgages",
    "status": false
  }]
});

Upvotes: 1

Views: 163

Answers (2)

Frederik Prijck
Frederik Prijck

Reputation: 1509

TLDR: See a working pen @ http://codepen.io/anon/pen/gwwLzE

You have a different scope for each ng-repeat, but scope is not the issue here. What's happening is you are using ng-repeat 4 times on the same array, hence the same objects in the array so this means you are constantly pointing to the same objects in memory (heap). Please do some reading on Stack vs Heap and how they both function.

Basicly, since we are accessing the same array of objects 4 times, and we are updating the item.status property of a particular object in that array, this would update all other ng-repeats as it's the exact same object being referencend.

A solution would be to have two arrays:

  • One for consumers
  • One for business

This can be achieved using:

$scope.consumersProductTypes = $scope.INDproducttypes;
$scope.businessProductTypes = angular.copy($scope.INDproducttypes);

now update your view accordingly:

<div ng-app="DataEntryApp" ng-controller="DataEntryController">
<div>
  <labes>
  Products  for consumers </label>
  <li ng-repeat="item in consumersProductTypes">
    <span>{{ item.value}}</span>
    <input type="checkbox" ng-model ="item.status"  />
  </li>
  <label>--------------------------------------</label></br>
  <label> Products  for business </label>
  <li ng-repeat="item in businessProductTypes">
    <span>{{ item.value}}</span>
    <input type="checkbox" ng-model ="item.status"  />
  </li>
</div>
<div ng-repeat="item in consumersProductTypes">
  <div ng-show ="item.status">
    <input type="text" name="name">
  </div>
</div>
<div ng-repeat="item in businessProductTypes">
  <div ng-show ="item.status">
    <input type="text" name="name">
  </div>
</div>

See a working pen @ http://codepen.io/anon/pen/gwwLzE

Upvotes: 1

Millenjo
Millenjo

Reputation: 441

If I understand your question correctly you just want to separate the two different lists so they aren't synced?

In that case, I think that there is a problem with your model, since it only has one "status" attribute. You should consider renaming the "status" attribute to something more descriptive, what is status anyways? You could separate them into consumer_status and business_status maybe, even if that doesn't help to clarify what it actually is it helps with the sync problem.

Upvotes: 0

Related Questions