Угловое ng-repeat внутри ng-repeat collapse

Question

Я пытаюсь выполнить ng-повтор внутри краха 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: Вместо написания нг-повтора = "s в хлам", мы будем писать нг-повтор = "s в 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 и загружать второй массив, используя идентификатор и сохранить его как вещи собственности для каждого элемента, так что мы можем получить доступ к второму массиву, используя 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) и получите дочерний элемент, а затем используйте его во втором цикле.

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