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：防止更改先前面板中的信息

1 个答案: