ng-repeat: предотвратить изменение информации на предыдущих панелях

Question

Итак, проблема в следующем:

У меня есть структура HTML здесь:

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

И его контроллер:

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

    }
]);

Когда я нажимаю на одну панель свертывания, у меня появляются правильные данные сзади, но проблема появляется, когда я пытаюсь открыть две или более панели. В результате у меня одинаковые вещи на всех открытых панелях.

Как я могу предотвратить изменение информации на предыдущих панелях?

Answer 1

Вы можете сделать так, чтобы служба вернула данные обратно в someResponse модель. Таким образом, вся информация о цене и деталях просто расширяет общий список. и так как он живет в вашем ng-repeat, двусторонняя привязка будет отображать информацию.

Просто измените этот код на этот... Я не уверен, является ли идентификатор ниже уникальным идентификатором из базы данных или идентификатором в массиве, который является частью ответа. если у вас есть оба, вы можете использовать этот код...

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

Итак, вы храните информацию в объекте в исходной модели. То, что вы делали, хранили все в одной модели данных. Таким образом, всякий раз, когда вы обновляли его, двусторонняя привязка обновлялась и каскадировалась к двум ссылкам (в обеих развернутых панелях).

Затем вы должны обновить ng-repeat и ng-click так:

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

и, наконец, обновите фигурные скобки на панелях примерно так:

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

И я добавил ng-show="item.IdResponse" так что форматирование не будет отображаться до тех пор, пока не будет возвращен объект с сервера.

Надеюсь, это ответит на ваш вопрос.