Question

我正在尝试解决一个旧的angularjs'问题'，这实际上是预期的行为：'将ng-model添加到预定义的Select元素会添加未定义的选项'（https://github.com/angular/angular.js/issues/1019）。

我正在使用ng 1.4.9，ui-bootstrap，ui-router，并尝试使用'bootstrap-formhelpers-states'作为状态选择列表。我在项目中有jQuery以支持FullCalendar，我有一个ng指令，但我不想将它用于其他任何东西。

我可以让州列表工作，而不必包含任何bootstrap js，但我没有得到绑定到Model在init上正常工作，这是许多人遇到的麻烦。

从这个问题（Why angularJS´s ui-view breaks Bootstrap Formhelper）我得到了国家的指令，并为各国进行了调整：

angular.module("myApp").directive('statepicker', function ($parse) {
    return {
        restrict: 'A', // It is an attribute
        require: '?ngModel', // It uses ng-model binding
        scope: {
          ngModel: '='
        },
        link: function (scope, elem, attrs, ctrl) {
            // Add the required classes
            elem.addClass('bfh-states'); 
            // First we initialize the selec with the desired options
            elem.select({
                filter: (elem.attr('data-filter') == 'true') ? true : false
            }).on('change', function() {
                // Listen for the change event and update the bound model
                return scope.$apply(function () {
                    return scope.ngModel = elem.val();
                });
            });
            scope.$watch('ngModel', function (newVal, oldVal) {
                if (newVal != oldVal) {
                    elem.val(newVal);
            });
            // Initialize the states with the desired options
            return elem.bfhstates({
                flags: (elem.attr('data-flags') == 'true') ? true : false,
                country: 'US',
                state: scope.ngModel || 'CA',
                blank: false
            });
        }
    };
});

因此，如果我不添加'ng-model''select'元素，它会使用指令选项（CA）中的值初始化OK，但是使用模型绑定时，它不会;与它有关的事情不是列表中的有效选项（但确实如此）。问题是当我正在编辑一个退出地址时，我希望从变量模型值设置列表，但是当通过初始指令选项设置时，不可更改。

HTML：

<select statepicker id="stateList" name="state" class="form-control" ng-model="state" ng-init="initState()"></select>
<button ng-click="setState('NY')">Set State</button>

使用模型绑定，我可以使用一个按钮和一个观察器来设置加载后的值，但是尝试通过'ng-init'这样做是行不通的。

控制器功能：

$scope.state = 'IL';

$scope.initState = function() {
    $scope.setState('AZ');
};

$scope.setState = function(val) {
    $scope.state = val;
};

在angularjs ui-bootstrap中，如何在bootstrap-formhelpers-states中设置初始选项，并避免'？ undefined：undefined？'选项？

0 个答案: