Question

我使用此指令（wallop-slider-angularjs）并且它需要一个图像网址数组，但我的网址是对象数组的属性。如何以指令可接受的方式绑定属性？

<div ng-repeat="user in users">

    <wallop-slider
        data-images="??user.media.mediumURL??"
        data-animation="rotate"
        data-current-item-index="currentSliderIndex"></wallop-slider>

</div>


media = [{'mediumURL':'http://whatever.com/image.jpg'},{'mediumURL':'http://whatever.com/image2.jpg'}]

Answer 1

我用自定义过滤器解决了这个问题：

app.filter('extractProperty', function() { 
   return function(array, propertyName) {
    return array.map(function(item) { return item[propertyName]; });
   };
});

要获取包含特定属性的数组，必须使用它：

<div ng-repeat="user in users">
 <wallop-slider data-images="{{ media | extractProperty:'mediumURL' }}"...></wallop-slider>
</div>

这是一个工作示例： http://plnkr.co/edit/WpuOCU?p=preview

Answer 2

只需在作用域上创建一个函数，该函数将从数组中提取所需的属性。类似的东西：

scope.getMediumUrls = function(arr) {
  return $.map(arr, function(item) { return item.mediumURL; });
}

然后在指令上使用它：

<div ng-repeat="user in users">
  <wallop-slider data-images="getMediumUrls(user.media)"...></wallop-slider>
</div>

Answer 3

编辑：如果您已经依赖jQuery，我会选择Shay Friedmans answer。

我认为这会做你的伎俩（不需要任何额外的库）。

// Helper function to pluck the url property from the media items.

function pluckUrls() {
  var ret = [], c = $scope.mediaItems.length;

  while(c--) {
    ret.push($scope.mediaItems[c].url);
  }

  return ret;  
}

// Function that is called each watch cycle. The return value will differ
// if one of the urls has been modified.

function getUniqueWatchValue() {
  return pluckUrls().join();
}

// Function that is called whenever one of the urls has been modified.

function watchValueChanged() {
  console.log('One of the urls has been modified');
  $scope.mediaUrls = pluckUrls();
}

// Hook up the watch.

$scope.$watch(getUniqueWatchValue, watchValueChanged);

可以找到行动中的傻瓜here。

注意：我注意到那个wallop-slider thingy中的一段代码正在观察对数组的引用，而不是内容。我还没有对它进行测试，但它可能要求您完全重新创建数组，而不是简单地添加或删除它。

$scope.$watch('images', function(images) {
  if (images.length) {
    _goTo(0);
  }
});

Answer 4

您需要遍历对象以及键和相应的属性。

假设您有JS对象

var media = [
 {'mediumURL':'http://whatever.com/image.jpg'},
 {'mediumURL':'http://whatever.com/image2.jpg'}
];

让我们在循环中申请获取值

for(key in media){
 alert(media[key].mediumURL);
}

这里＆＃34;关键＆＃34;指媒体[]和＆＃34; mediumURL＆＃34;的索引。是个人对应的财产。

在你的情况下，

<div ng-repeat="user in users">

    <wallop-slider
        data-images="??user.mediumURL??"
        data-animation="rotate"
        data-current-item-index="currentSliderIndex"></wallop-slider>

</div>

注意：您正在使用＆＃34; user.media.mediumURL＆＃34;因此它无法正常工作，因为＆＃34;媒体＆＃34;不是media []下每个对象结构的属性。

有关ng-repeat循环示例的更多详细信息，请参阅this link。

Answer 5

最简单的方法是使用下面的下划线：

    <wallop-slider
        data-images="_.pluck(user.media.mediumURL, 'mediumURL')"
        data-animation="rotate"
        data-current-item-index="currentSliderIndex"></wallop-slider>

</div>

但在此之前你需要做两件事：

添加下划线

<script src="/whatever/underscore.js"></script>
将下划线注入控制器，如下面的

angular.module('app', []) .controller('Ctrl', function($scope, $window) { $scope._ = $window._ });

希望有所帮助，罗恩

AngularJS：绑定到一个数组，但是一个特定的属性？

5 个答案: