Javascript 如何使用AngularJS指令向select添加选项？

我有一个select标签（用于国家/地区选择），我想使用指令预先填充选项：

<select class="countryselect" required ng-model="cust.country"></select>

我可以用其他选项填充select，但ng模型绑定不起作用。即使cust.country有一个值（例如“UAE”），也不会选择该选项

---

如何使select显示cust.country的值？如果我认为这里有一些计时问题。

您可以使用Angular JS的指令：

标记：

<div ng-controller="MainCtrl">
<select ng-model="country" ng-options="c.name for c in countries"></select>
{{country}}
</div>

app.controller('MainCtrl', function($scope) { 
   $scope.countries = [
    {name:'Vereinigte Arabische Emirate', value:'AE'},
    {name:'Andorra', value:'AD'},
  ];

  $scope.country = $scope.countries[1]; 

});

  app.directive('sel', function () {
    return {
        template: '<select ng-model="selectedValue" ng-options="c.name for c in countries"></select>',
        restrict: 'E',
        scope: {
            selectedValue: '='
        },
        link: function (scope, elem, attrs) {
            scope.countries = [{
                name: 'Vereinigte Arabische Emirate',
                value: 'AE'
            }, {
                name: 'Andorra',
                value: 'AD'
            }, ];
            scope.selectedValue = scope.countries[1];
        }
    };
});

app.controller('MainCtrl', function($scope) {

  $scope.country={};

})

<div ng-controller="MainCtrl">
<sel selected-value="country"></sel>
{{country}}
</div>

检查选择的文档：

使用指令编辑

指令：

<div ng-controller="MainCtrl">
<select ng-model="country" ng-options="c.name for c in countries"></select>
{{country}}
</div>

app.controller('MainCtrl', function($scope) { 
   $scope.countries = [
    {name:'Vereinigte Arabische Emirate', value:'AE'},
    {name:'Andorra', value:'AD'},
  ];

  $scope.country = $scope.countries[1]; 

});

  app.directive('sel', function () {
    return {
        template: '<select ng-model="selectedValue" ng-options="c.name for c in countries"></select>',
        restrict: 'E',
        scope: {
            selectedValue: '='
        },
        link: function (scope, elem, attrs) {
            scope.countries = [{
                name: 'Vereinigte Arabische Emirate',
                value: 'AE'
            }, {
                name: 'Andorra',
                value: 'AD'
            }, ];
            scope.selectedValue = scope.countries[1];
        }
    };
});

app.controller('MainCtrl', function($scope) {

  $scope.country={};

})

<div ng-controller="MainCtrl">
<sel selected-value="country"></sel>
{{country}}
</div>

标记：

<div ng-controller="MainCtrl">
<select ng-model="country" ng-options="c.name for c in countries"></select>
{{country}}
</div>

app.controller('MainCtrl', function($scope) { 
   $scope.countries = [
    {name:'Vereinigte Arabische Emirate', value:'AE'},
    {name:'Andorra', value:'AD'},
  ];

  $scope.country = $scope.countries[1]; 

});

  app.directive('sel', function () {
    return {
        template: '<select ng-model="selectedValue" ng-options="c.name for c in countries"></select>',
        restrict: 'E',
        scope: {
            selectedValue: '='
        },
        link: function (scope, elem, attrs) {
            scope.countries = [{
                name: 'Vereinigte Arabische Emirate',
                value: 'AE'
            }, {
                name: 'Andorra',
                value: 'AD'
            }, ];
            scope.selectedValue = scope.countries[1];
        }
    };
});

app.controller('MainCtrl', function($scope) {

  $scope.country={};

})

<div ng-controller="MainCtrl">
<sel selected-value="country"></sel>
{{country}}
</div>

{{国家}

---

工作示例：

您需要将选项添加到ngModelController，以使其正常工作。例如，像这样：

return {
    restrict : 'C',
    require: ['select', 'ngModel'],
    link: function(scope, element, attrs, controllers) {
        var countries = [['A', 'text text']];
        countries.forEach(option => {
            const optionElement = angular.element('<option/>')
                .attr('value', option[0])
                .text(option[1]);

            element.append(optionElement);
            controllers[0].addOption(option.value, optionElement);
        });
    }
};

返回{
限制：“C”，
要求：['select'，'ngModel']，
链接：函数（范围、元素、属性、控制器）{
变量国家=['A'，'text']；
countries.forEach（选项=>{
常量optionElement=角度元素（“”）
.attr（'value'，选项[0]）
.文本（选项[1]）；
元素。附加（可选元素）；
控制器[0]。添加选项（option.value，optionElement）；
});
}
};

我同意，对于单个国家/地区选择字段，这是一个完美的解决方案。在我的例子中，我有几个county select字段，所以我想使其更具可重用性。请检查我的编辑。现在您有了all in指令，可以轻松绑定到其他变量。我还建议在这里使用

replace:true

，因为它将从最终HTML标记中删除包装

元素。