Angular-带有 json 对象的 Flexslider

Question

我在我的应用程序上使用 Angular-Flexslider，我需要它来显示来自 json 对象的图像。

Angular-flexslider 包含一个指令 flex-slider，它的作用类似于 ng-repeat，因此可以正常工作

<flex-slider slide="s in mySlides">
    <li>
        <img ng-src="{{s}}">
    </li>
</flex-slider>

但是我需要它从对象而不是数组获取图像，这是行不通的。

<flex-slider slide="(key, s) in mySlidesObj">
    <li>
        <img ng-src="{{s.slide}}">
    </li>
</flex-slider>

有什么方法可以让它工作吗？

控制器刚刚有数据：

app.controller('BasicSliderCtrl', function($scope) {
    $scope.mySlides = [
        'http://images.mydomain.com/General-3-320x320.jpg',
        'http://images.mydomain.com/Jared-video-320x320.jpg'
    ];

    $scope.mySlidesObj = {
      "1001" : {
        "slide" : "http://images.mydomain.com/img1.jpg"
      },      
      "1002" : {
        "slide" : "http://images.mydomain.com/ig2.jpg"
      },          
      "1003" : {
        "slide" : "http://images.mydomain.com/img3.jpg"
      },          
      "1004" : {
        "slide" : "http://images.mydomain.com/ig4.jpg"
      },

    }
});

Answer 1

查看源代码似乎不支持迭代对象。

您最好的选择可能是手动将对象转换为数组。

例如：

$scope.mySlides = Object.keys($scope.mySlidesObj).map(function(slideObj) {
  return $scope.mySlidesObj[slideObj].slide;
});

演示： http://plnkr.co/edit/fJ8IrPAt0cInvzD6fwdy?p=preview

Angular-带有 json 对象的 Flexslider

Angular-Flexslider with json object

angularjs

angularjs-ng-repeat