Question

我有一个应该更改滑块（角度光滑）的下拉菜单。选择菜单显示选项，当选择时幻灯片不更新。我使用的是角1.3.0。

我相信我已将其缩小到不更新价值的模型。

这是我的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>

这是应该更新到模型以触发ng-change的init和函数：

// 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'}
            ]
        }
    };

Angular slick似乎正在使用ng-if和timeout更新：

// init and reInit slick
    $scope.slideLoaded = true;
    $scope.updateSlide = function() {
        $scope.slideLoaded = false;
        console.log('slide update');
        $timeout(function() {
            $scope.slideLoaded = true;
        });
    };

在控制台中我没有更新＆＃34; ID未被更新＆＃34; （来自选择初始化），＆＃34;幻灯片更新＆＃34;当从下拉列表中做出选择时，我也应该看到＆＃34;终于！＆＃34;从模型中更改选定的值。

感谢任何帮助。

Answer 1

我在使用$scope.$watch('modelname' ,..时也遇到过这个问题。我目前使用此功能 -

$scope.$watch(
   function(){ return $scope.modelname;}, function(newVal, oldVal){
   ....... 
   }
)

撰写function以返回model代替modelname（字符串）。这绝不会失败。

ng-model不更新值

1 个答案: