0

我正在尝试解决一个旧的 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 指令，但我试图不将它用于其他任何事情。

我可以让 States 列表正常工作，而不必包含任何引导 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
            });
        }
    };
});

因此，如果我没有在“select”元素中添加“ng-model”，它会使用指令选项（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;
};
4

0 回答 0