ng-repeat内的Angular ng-repeat折叠答案

【问题标题】：Angular ng-repeat inside ng-repeat collapseng-repeat内的Angular ng-repeat折叠
【发布时间】：2016-09-15 14:17:08
【问题描述】：

我一直在尝试在 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;
  },

【问题讨论】：

我看不到您在哪里使用m 过滤stuff 数据，所以我假设在每个m 中都会显示整个数组。你可以做类似ng-repeat="s in m.stuff 的事情。但是您需要提供更多详细信息来说明您想要实现的目标
是的......内部重复通常（但不总是）重复在外部重复中隔离的父对象中的一组项目。显示数据简单
我有两个数组。第一个数组让我返回市场名称 [{marketname, id}]。然后我使用第一个数组中的 id 返回第二个数组，该数组返回一个包含市场详细信息的数组。 [{时间表、地址、时间}]。这两个数组是按顺序排列的。首先我在 div 面板上显示市场名称，然后当您单击面板时，您会看到第二个数组的详细信息
在这种情况下，您的 getInfo() 函数是否接受市场 id 作为参数，例如 getInfo(m.id) ？
@user4955287 你能展示一下你是如何得到第二个数组的吗？

标签： javascript angularjs angularjs-ng-repeat

【解决方案1】：

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

HTML： 我们将不写 ng-repeat = "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加载第二个数组并将其保存为每个元素的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;
},

【讨论】：

这不起作用。我收到未定义的 id 值
验证您的 marketResults 数组以检查您如何获取 id 值

【解决方案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>

【讨论】：

【解决方案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;
  },

【讨论】：