同一 div 中的多个 ng-repeat答案

【问题标题】：Multiple ng-repeat in the same div同一 div 中的多个 ng-repeat
【发布时间】：2017-07-22 18:01:50
【问题描述】：

我几乎在这里 (Multiple ng-repeat on single element) 找到了答案，我只需要一点帮助。

我正在尝试使用 ng-repeat 在同一个 div 中显示多个值。我按照上面链接中的回答进行了操作，但我不知道在 $scope 中放什么。到目前为止没有任何显示。

这是我的 JS：

    var app = angular.module('test', []);

app.controller('MainCtrl', function($scope) {
    var database = firebase.database();
    database.ref(`trips/${userid}/trips`).once('value') 


.then(photosSnap => {
    var photosObj = photosSnap.val();
    var tripName = Object.keys(photosObj).map(key => photosObj[key].name);
    var tripPhotoUrl = Object.keys(photosObj).map(key => photosObj[key].photourl);

 this.repeatData = tripName.map(function(value, index) {
return {
    data: value,
    value: tripPhotoUrl[index]
}
});

    $scope.repeatData = data;
    $scope.repeatData = value;

    $scope.$apply();

    console.log($scope);
}).catch(err => alert(err));

     });

还有我的 HTML：

 <div class="main" ng-app="test" ng-controller="MainCtrl">

    <div id="usertripinfo" ng-repeat="data in repeatData" style="background-image: url({{data.value}}); height: 300px; width: 600px;">

     {{data.data}}

    </div>

 </div>

【问题讨论】：

你不能使用 style="background-image: url({{data.value}}); 像这样在你的视图中，使用 ng-class 而不是你直接分配地图到 $scope 而不是这个？

标签： javascript html angularjs angularjs-ng-repeat

【解决方案1】：

将结果分配给 $scope.repeatData 使其在 html 文件中作为 repeatData 可用，试试这个：

var app = angular.module('test', []);

  app.controller('MainCtrl', function ($scope) {
    var database = firebase.database();
    database.ref(`trips/${userid}/trips`).once('value')


      .then(photosSnap => {
        var photosObj = photosSnap.val();
        var tripName = Object.keys(photosObj).map(key => photosObj[key].name);
        var tripPhotoUrl = Object.keys(photosObj).map(key => photosObj[key].photourl);

        $scope.repeatData = tripName.map(function (value, index) {
          return {
            data: value,
            value: tripPhotoUrl[index]
          }
        });
      }).catch(err => alert(err));
  });

【讨论】：

再问一个问题，如何修改它以在同一范围内添加一个或多个变量？
只需将变量名添加为 $scope 中的键，例如 $scope.myVariable = 5 将使 myVariable 在 html 中可用，值为 5。

【解决方案2】：

   $scope.repeatData = data;
   $scope.repeatData = value;

我认为这样做 repeatData 会被值覆盖。这就是为什么您无法正确获得价值的原因。

但如果您既想要 data 又想要 value，则可以使用不同的键在对象中分配。

【讨论】：