1

我创建了一个自定义指令，该指令使用国家列表自动填充选择。该指令有一个预选隔离范围属性，如果设置为 true 将预选一个国家。

ng-model也作为隔离范围属性传递问题是ng-model不会被设置。

谁能给我一些关于如何制定<auto-countries>指令以便我能够设置的指示ng-model？

这是我的指令代码：

app.directive('autoCountries', function() {
    return {
        restict: 'E',
        controller: 'CountriesCtrl as ctrl',
        scope: {
            preselect: '=',
            ngModel: '='
        },
        template: [

            '<select ng-if="!preselect" ng-model="ngModel">',
                '<option value="">Select Country</option>',
                '<option ng-repeat="country in ctrl.countries" value={{country.name}}>',
                    '{{country.name}}',
                '</option>',
            '</select>',

            '<select ng-if="preselect" ng-model="ngModel">',
                '<option ng-repeat="country in ctrl.countries" ng-selected="ctrl.countryFromIP == country.name" value={{country.name}}>',
                    '{{country.name}}',
                '</option>',
            '</select>',
        ].join('')
    }
})

更奇怪的是，在完全不使用预选的指令的更简单版本ng-model中，将设置。

没有例子有点难以理解，所以这里有一个 Plunkr！ http://plnkr.co/edit/e1HPgGQlne7Q4TcNJ9XT?p=preview

4

2 回答 2

2

你不应该使用ng-repeaton <option>，而是使用ng-optionson <select>：

  <select ng-model="ngModel" ng-options="country.name as country.name for country in ctrl.countries"></select>

http://plnkr.co/edit/ADTPOIKZnnt14lVcr8TN?p=preview

于 2015-07-29T21:54:50.233 回答
1

您应该使用 ngOptions 而不是 ngRepeat。我分叉了dave 的 plnkr并对其进行了一些调整。带有和不带有预选的模板将如下所示：

'<select ng-model="ngModel" ng-options="country.name as country.name for country in ctrl.countries"></select>'

我在国家控制器而不是视图/模板中进行了预选，就像在 Angular 的ngOptions文档中一样。

$scope.ngModel = $scope.preselect ? $scope.ngModel = vm.countries[3].name : "";

（如果 preselect 等于 true，则为 ngModel 设置默认值，否则设置空字符串 - javascript 三元运算符。）

于 2015-07-29T23:46:02.293 回答