所以，问题是：
下面是一个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);
}
}
]);当我单击一个折叠面板时，我从后面得到了正确的数据，但当我试图打开两个或更多面板时，问题出现了。结果，我在所有打开的面板上得到了相同的结果。
如何防止更改先前面板中的信息？
1条答案
按热度按时间zc0qhyus1#
你可以让服务把数据推回到
someResponse模型中，这样所有的价格和细节信息只是扩展了一般的列表，因为它是在你的ng-repeat中，双向绑定将呈现信息。请将此代码更改为..我不确定下面的ID是来自数据库的唯一ID还是属于响应的数组中的ID。如果您同时具有这两个ID，则可以使用此代码...
因此，您将信息存储到原始模型中的一个对象中。您所做的是将所有内容存储到一个数据模型中。因此，无论何时更新它，双向绑定都会更新并级联到两个引用（在两个展开面板中）。
接下来，您可以将ng-repeat和ng-click更新为：
最后将面板中的花括号更新为如下形式：
我还添加了一个
ng-show="item.IdResponse"，以便在从服务器返回对象之前不会显示格式。我希望这能回答你的问题。