Angular ng-repeat ng 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

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

repeat HTML：我们不写ng-= "s in stuff"，而是写ng-repeat = "s in m.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加载第二个数组，并将其保存为每个元素的填充属性，这样我们就可以在ng-marketResults中使用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="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;
  },