Question

我一直试图在ng-repeat崩溃中执行ng-repeat。我的内部重复重复，重复每个div内的整个数组。我试图按索引进行跟踪，但仍无法解决：

<div class="col-md-4">
<div id="markets">
    <div class="panel panel-default" ng-repeat="m in marketResults | limitTo:5">
        <div class="panel-heading" ng-click="m.isCollapsed = !m.isCollapsed">{{m.marketname}}
        </div>
        <div uib-collapse="!m.isCollapsed">
            <div ng-repeat="s in stuff" >
                <p>{{s.$$state.value.Address}}</p>
                <p>{{s.$$state.value.GoogleLink}}</p>
                <p>{{s.$$state.value.Products}}</p>
                <p>{{s.$$state.value.Schedule}}</p>

            </div>
        </div>
    </div>
</div>

内部控制器：

_getLocation: function(key) { //extract latlng from _recordsCache

    var latLong = this._recordsCache[key];

    // console.log(latLong);
    fmCoordinates.lat = latLong.lat;
    fmCoordinates.lng = latLong.lng;

    var promise = requestMarkets(fmCoordinates.lat,fmCoordinates.lng);
    promise.then(function(marketData) {
      $scope.marketResults = marketData.results; //receiving market data
      $scope.quantity = 5; //limit market data to 5
      $scope.marketInfo = [];
      $scope.getInfo = function(){
        return $scope.marketInfo;
      }

      for(var property in $scope.marketResults) {
        var id = $scope.marketResults[property].id;
        console.log(id);
        $scope.marketInfo.push(getDetails(id));// brings back the details
      };
      console.log($scope.getInfo());


    }, function(reason) {
      console.log('Failed: ' + reason);
    });
    if( this._recordsCache.hasOwnProperty(key) )
      return latLong;//then after use .loc attribute
    else
      return false;
  },

Answer 1

您需要将第二个数组添加为第一个数组中每个项的属性。见下面的代码：

<强> HTML：我们不会在东西和＃34;中写出ng-repeat =＆＃34; s，而是在m.stuff＆＃34;

中写下ng-repeat =＆＃34; s。

<div class="col-md-4">
<div id="markets">
    <div class="panel panel-default" ng-repeat="m in marketResults | limitTo:5">
        <div class="panel-heading" ng-click="m.isCollapsed = !m.isCollapsed">{{m.marketname}}
        </div>
        <div uib-collapse="!m.isCollapsed">
            <div ng-repeat="s in m.stuff" >
                <p>{{s.$$state.value.Address}}</p>
                <p>{{s.$$state.value.GoogleLink}}</p>
                <p>{{s.$$state.value.Products}}</p>
                <p>{{s.$$state.value.Schedule}}</p>

            </div>
        </div>
    </div>
</div>

<强>控制器：首先加载marketResults数组。然后在for循环中，遍历marketResults中的每个元素并使用id加载第二个数组并将其保存为每个元素的stuff属性，这样我们就可以使用ng-repeat中的m.stuff访问第二个数组

_getLocation: function(key) { //extract latlng from _recordsCache

var latLong = this._recordsCache[key];

// console.log(latLong);
fmCoordinates.lat = latLong.lat;
fmCoordinates.lng = latLong.lng;

var promise = requestMarkets(fmCoordinates.lat,fmCoordinates.lng);
promise.then(function(marketData) {
  $scope.marketResults = marketData.results; //receiving market data
  $scope.quantity = 5; //limit market data to 5

  for(var market in $scope.marketResults) {

    market.stuff = getDetails(market.id);// brings back the details

  };

}, function(reason) {
  console.log('Failed: ' + reason);
});
if( this._recordsCache.hasOwnProperty(key) )
  return latLong;//then after use .loc attribute
else
  return false;
},

Answer 2

您可以使用ng-init在每个父行上保留子项。将id传递给getChild（m.id）并获取子级，然后在第二次循环中使用它。

ng-init =＆＃34; rowchild = getChild（m.id）＆＃34;

<div id="markets">
    <div class="panel panel-default" ng-repeat="m in marketResults | limitTo:5" ng-init="rowchild = getChild(m.id)">

        <div class="panel-heading" ng-click="m.isCollapsed = !m.isCollapsed">
            {{m.marketname}}
        </div>

        <div uib-collapse="m.isCollapsed">

            <div ng-repeat="s in rowchild">

                <p>{{s.Address}}</p>

            </div>

        </div>
    </div>
</div>

Answer 3

<div class="col-md-4">
    <div id="markets">
        <div class="panel panel-default" ng-repeat="m in marketResults | limitTo:5">
            <div class="panel-heading" ng-click="m.isCollapsed = !m.isCollapsed">{{m.marketname}}
            </div>
            <div uib-collapse="!m.isCollapsed">
                <div>
                    <p>{{m.stuff.$$state.value.Address}}</p>
                    <p>{{m.stuff.$$state.value.GoogleLink}}</p>
                    <p>{{m.stuff.$$state.value.Products}}</p>
                    <p>{{m.stuff.$$state.value.Schedule}}</p>

                </div>
            </div>
        </div>
    </div>
</div>

//控制器内部

  _getLocation: function(key) { //extract latlng from _recordsCache

    var latLong = this._recordsCache[key];

    // console.log(latLong);
    fmCoordinates.lat = latLong.lat;
    fmCoordinates.lng = latLong.lng;


    var promise = requestMarkets(fmCoordinates.lat,fmCoordinates.lng);
    promise.then(function(marketData) {
      $scope.marketResults = marketData.results; //receiving market data
      $scope.quantity = 5; //limit market data to 5
      $scope.marketInfo = [];
      console.log($scope.marketResults);

      for (var i = 0; i < marketData.results.length; i++){
        marketData.results[i].stuff = getDetails(marketData.results[i].id);
      };

    }, function(reason) {
      console.log('Failed: ' + reason);
    });
    if( this._recordsCache.hasOwnProperty(key) )
      return latLong;//then after use .loc attribute
    else
      return false;
  },

ng-repeat崩溃中的角度ng重复

3 个答案: