ng-repeat折疊內的角ng-repeat

Question

我一直在嘗試在ng-repeat折疊內執行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：我們將編寫ng-repeat =“ s in m.stuff”，而不是編寫ng-repeat =“ s in stuff”

<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）並獲取child，然后在第二個循環中使用它。

ng-init =“ rowchild = getChild（m.id）”

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