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 中，因此双向绑定将呈现信息。

只需将此代码更改为这个。我不确定下面的 ID 是来自数据库的唯一 ID 还是作为响应一部分的数组中的 ID。如果两者都有，您可以使用此代码...

$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" 以便在服务器返回对象之前不会显示格式。

我希望这能回答你的问题。

ng-repeat：防止更改先前面板中的信息

ng-repeat: prevent changing of information in previous panels

javascript

panels

collapse

angularjs