1

選択項目に国のリストを自動入力するカスタム ディレクティブを作成しました。ディレクティブには preselect isolate スコープ属性があり、true に設定すると国が事前選択されます。

ng-modelまた、isolate スコープ属性としても渡されます。問題は、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('')
    }
})

さらに奇妙なのは、preselect をまったく使用しない単純なバージョンng-modelのディレクティブでは、が設定されることです。

例がないとちょっとわかりにくいので、Plunkr をご紹介します。 http://plnkr.co/edit/e1HPgGQlne7Q4TcNJ9XT?p=preview

4

2 に答える 2

1

ngRepeat の代わりに ngOptions を使用する必要があります。dave の plnkrをフォークして、少し調整しました。事前選択の有無にかかわらず、テンプレートは次のようになります。

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

ngOptionsのAngularのドキュメントと同じように、ビュー/テンプレートの代わりに国コントローラーで事前選択を行いました。

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

(preselect が true の場合は ngModel のデフォルトを設定し、それ以外の場合は空の文字列 - JavaScript 三項演算子を設定します。)

于 2015-07-29T23:46:02.293 に答える