У меня есть выпадающий список, который должен сменить ползунок (угловое пятно). Меню выбора отображает выбор, и когда выбор сделан, слайды не обновляются. Я использую угловой 1.3.0.ng-model not update value
Я считаю, что я сузил это до модели, не обновляя значение.
Вот мой HTML:
<select class="form-control" ng-options="d.id as d.category for d in draggableObjects | object2Array | orderBy:'id'" ng-change="updateSlide()" ng-model="selectedSlideId"></select>
<slick class="slider" objs="obj" data="draggableObjects" settings="slickConfig" ng-if="slideLoaded">
<li ng-repeat="obj in draggableObject.item" class="draggable-item slide">
<div ng-drag="true" ng-drag-data="obj" data-allow-transform="true">
<img ng-src="{{obj.src}}" alt="{{obj.name}}">
{{obj.name}}
</div>
</li>
</slick>
Вот инициализации и функция, которая должна обновить модели для запуска нг-изменения:
// selection from the select dropdown
$scope.$watch('selectedSlideId', function(newVal, oldVal) {
if (newVal !== oldVal) {
$scope.draggableObject = $scope.draggableObjects[newVal];
console.log('finally!');
} else {
$scope.draggableObject = $scope.draggableObjects[1];
console.log('id not updated');
}
});
// init dashboard
$scope.selectedSlideId = '1';
А вот объект JSON, что сортируется через:
// draggable objects
$scope.draggableObjects = {
1: {
id: '1',
category: 'Slider',
item: [
{name:'slider one', src: 'images/placeholderslider.png'},
{name:'slider two', src: 'images/placeholderslider2.png'},
{name:'slider three', src: 'images/placeholderslider3.png'},
{name:'slider four', src: 'images/placeholderslider4.png'},
{name:'slider five', src: 'images/placeholderslider5.png'}
]
},
2: {
id: '2',
category: 'News',
item: [
{name:'news one', src: 'images/placeholdernews.png'},
{name:'news two', src: 'images/placeholdernews2.png'},
{name:'news three', src: 'images/placeholdernews3.png'},
{name:'news four', src: 'images/placeholdernews4.png'},
{name:'news five', src: 'images/placeholdernews5.png'}
]
}
};
Угловая пятно, похоже, обновление с помощью нг-если и тайм-аут:
// init and reInit slick
$scope.slideLoaded = true;
$scope.updateSlide = function() {
$scope.slideLoaded = false;
console.log('slide update');
$timeout(function() {
$scope.slideLoaded = true;
});
};
В консоли я получаю «идентификатор не обновляется» (от инициализации выбора), и «обновление слайдов», когда выбор производится из выпадающего списка, когда я должен видеть «в конце концов!» от модели, изменяющей выбранное значение.
Цените любую помощь.
Спасибо за предложение. Я переработал сценарий и, к сожалению, я до сих пор не вижу обновления моих слайдов, при этом консольная печать «id not updated». Я удалил свои фильтры (думая, что могу возвращать неправильный тип значения), но все равно не вижу «наконец!». печать на консоль. Кажется, что newVal, и oldVal не сравниваются. – zach57
Хорошо, я поймал не то, что случилось со мной. Если в сравнении была проблема, а 'oldVal',' newVal' - строка, вы должны сравнивать с методом 'str1.equals (str2)' не с '=='. –
Есть ли способ опубликовать обновленный код? Я бы очень признателен. – zach57