UPD1

Question

我有2个选择列表：

<select class="input-large" ng-model="bu.box.categoryId" ng-change="getSubCats()">
   <option ng-repeat="cat in cats" value="{{cat.id}}">{{cat.name}}</option>
</select>

 <select class="input-large" ng-model="bu.box.subCategoryId">
    <option ng-repeat="subcat in subCats" value="{{subcat.id}}">{{subcat.name}}</option>
</select>

对象bu，subcats从解析中注入我的控制器，并且在渲染绑定之前存在，cats我从本地存储获取：

$stateProvider.state('box',
            {
                url: '/box-card/:id',
                templateUrl: '/partials/main.module/contollers/box.html?v=' + global_app_version,
                controller: 'BoxController as boxCtrl',
                resolve: {
                    Box: function ($stateParams, httpService) {
                        return httpService.getBox({ boxid: $stateParams.id });
                    }
                }
            })

控制器变量初始化如下所示：

function boxController($scope, localStorageService, httpService, $state, appData, uiGridConstants, $modal, helpersService, $stateParams, $sce, Box) {
        $scope.bu = Box.data.bu;
        $scope.cats = localStorageService.get("cats");
        $scope.subCats = Box.data.currentSubCats;
............

var controllers = angular.module('app.controllers');
controllers.controller('BoxController', boxController);

问题是，当呈现选择列表时，它们未正确初始化，选择第一个选项而不是ng-model的相关初始化。这里发生了什么？为什么不能正常工作？我在调试中检查了所有变量，一切都很好......在这里需要帮助。

Answer 1

尝试使用ng-selected来解决问题。

Answer 2

尝试使用$scope.$apply()。

来自文章：

如果您编写任何使用Ajax但没有$ http或侦听的代码不使用Angular的ng- *侦听器的事件，或设置超时如果没有$ timeout，你应该将你的代码包装在$ scope中。$ apply

看起来就像你的情况。 Box在后台请求中更新，角度侦听器不知道它已更新。

UPD1

还注意到问题可能隐藏在这里 $scope.bu在$scope.cats之前初始化，因此模型实际上会尝试匹配仍为空的选项列表。

UPD2

在评论中注意到ng-options绑定有点偏。尝试使用

<select ng-options="cat.name for cat.id in cats track by cat.id" class="input-large" ng-model="bu.box.categoryId" ng-change="getSubCats()">

Answer 3

<select class="input-large" ng-model="bu.box.categoryId" ng-init="cat = cats[0]" ng-change="getSubCats()">
   <option ng-repeat="cat in cats" value="{{cat.id}}">{{cat.name}}</option>
</select>

 <select class="input-large" ng-model="bu.box.subCategoryId" ng-init="subcat = subCats[0]">
    <option ng-repeat="subcat in subCats" value="{{subcat.id}}">{{subcat.name}}</option>
</select>

我在我的项目ng-init中使用ng-init="subcat = subCats[0]" 更改初始值的subCats[0]和cats[0]

Angularjs选择列表不初始化默认值

3 个答案:

UPD1

UPD2