AngularJS: привязка к массиву, но конкретное свойство?

Question

Я использую эту директиву (wallop-slider-angularjs), и для этого требуется массив URL-адресов изображений, но мои URL-адреса являются свойствами массива объектов. Как связать свойство таким образом, чтобы оно было приемлемо для директивы?

<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

Edit: Если у вас уже есть зависимость от 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.

Примечание: Я заметил фрагмент кода в том, что навесное устройство, которое смотрит ссылку на массив, а не содержимое. Я не тестировал его, но, вероятно, вам нужно полностью воссоздать массив, а не просто добавлять или удалять из него элемент.

$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); 
} 

Здесь «ключ» относится к индексу для СМИ [] и «mediumURL» является физическое лицо соответствующее свойство.

В вашем случае,

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

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

</div> 

Примечание: Вы использовали «user.media.mediumURL», поэтому он не будет работать, потому что «средства массовой информации» не является собственностью для каждой структуры объекта по СМИ [].

Для получения более подробной информации о примерах петли 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> 

Но перед тем, что вам нужно сделать 2 вещи:

1. добавить подчеркивание

   <script src="/whatever/underscore.js"></script>

2. вводят нижние corejs в контроллер, как folloiwng

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

Надежда, которые помогают, Рон