ng-repeat: prevent changing of information in previous panels

Question

So, the issue is:

I have an HTML structure here:

<div class="container-fluid" ng-click="goto(item.title)" ng-repeat="item in someResponse" data-toggle="collapse" data-parent="accordion"
 data-target="#collapseone_{{ $index }}" aria-expanded="false" aria-controls="#collapseone">
<div class="panel-group" id="accordion">
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="wrap">
                <img class="img" ng-src="{{item.img_url}}">
                <p>{{item.title}}</p>
                <p>{{item.price | currency}}</p>
                <p>{{item.summary}}</p>
            </div>
        </div>
        <div id="collapseone_{{ $index }}" class="panel-collapse collapse" ng-model="collapsePanel">
            <div class="panel-body">
                <div>
                    <p>{{IdResponse.price | currency}}</p>
                    <p>{{IdResponse.title}}</p>

                    <img class="img" ng-src="{{IdResponse.img_url}}">

                    <p>{{IdResponse.summary}}</p>

                    <p>Bathrooms:{{IdResponse.bathroom_number}}</p>
                    <p>Bedrooms:{{IdResponse.bedroom_number}}</p>

                    <input type="button" value="favourites" ng-click="goto1()">
                </div>
            </div>
        </div>

    </div>
</div>

And its controller:

angular
.module('PropertyCross')
.controller('searchResultsCtrl', ['$scope', '$http', '$location', 'myService',
    function ($scope, $http, $location, myService) {


        $scope.someResponse = myService.getData();
        console.log($scope.someResponse);


        $scope.goto = function (id) {
            myService.setID(id);
            console.log(id);
            $scope.IdResponse = myService.getID();
            console.log($scope.IdResponse);
        };
        $scope.goto1 = function () {
            myService.setFav($scope.IdResponse);
        }

    }
]);

When I click on one collapse panel I have the right data coming from the back, but the problem appears when I try to open two or more panels. As a result I have the same things on all opened panels.

How can I prevent the changing of information in previous panels?

Answer 1

You could have the service push the data back into to the someResponse model. That way all of the price and detail information just extends the general listing. and since it is living within your ng-repeat the two-way binding will render the info.

Just change this code to this.. I'm not sure if the id below is a unique id from a database or the id within the array which is part of the response. if you have both you can use this code...

$scope.goto = function (id, arrayIndex) {
        myService.setID(id);
        console.log(id);
        $scope.someResponse[arrayIndex].IdResponse = myService.getID();
        console.log($scope.someResponse[arrayIndex].IdResponse);
    };

So, you are storing the information into an object within the original model. What you were doing was storing everything in one data model. So, whenever you updated it, the two way binding updated and cascaded to the two references (in both expanded panels).

Next, you would update your ng-repeat and ng-click to this:

<div class="container-fluid" 
    ng-click="goto(item.title, index)" 
    ng-repeat="(index, item) in someResponse" 
    data-toggle="collapse" data-parent="accordion" 
    data-target="#collapseone_{{ $index }}" 
    aria-expanded="false" aria-controls="#collapseone">

and finally update the curly braces in the panels to something like this:

<div id="collapseone_{{ $index }}" 
     class="panel-collapse collapse" ng-model="collapsePanel">
        <div class="panel-body">
            <div ng-show="item.IdResponse">
                <p>{{item.IdResponse.price | currency}}</p>
                <p>{{item.IdResponse.title}}</p>

                <img class="img" ng-src="{{item.IdResponse.img_url}}">

                <p>{{item.IdResponse.summary}}</p>

                <p>Bathrooms:{{item.IdResponse.bathroom_number}}</p>
                <p>Bedrooms:{{item.IdResponse.bedroom_number}}</p>

                <input type="button" value="favourites" ng-click="goto1()">
            </div>
        </div>
    </div>

And I added an ng-show="item.IdResponse" so that the formatting wont show up until there is an object returned from the server.

I hope this answers your question.