4

ディレクティブ属性でそれらを指定することにより、selectsng-optionsの「オプション値」および「オプションの説明」属性を指定するドロップダウンディレクティブを作成しようとしています。理解を深めるためにコードを参照してください...

これが私の指示です。これは明らかに機能しませんが、私がやろうとしていることを説明していると思います...

app.directive('dropdown', function(){
return {
    restrict: 'E',
    scope: {
        array: '='
    },
    template:   '<label>{{label}}</label>' +
                '<select ng-model="ngModel" ng-options="a[{{optValue}}] as a[{{optDescription}}] for a in array">' +
                    '<option style="display: none" value="">-- {{title}} --</option>' +
                '</select>',
    link: function (scope, element, attrs) {
        scope.label = attrs.label;  
        scope.title = attrs.title;
        scope.optValue = attrs.optValue;
        scope.optDescription = attrs.Description;
    }
};

}）;

...そしてこれが私がそれをどのように使いたいかです

<dropdown title="Choose ferry" label="Ferries" array="ferries" opt-value="Id" opt-description="Description"></dropdown>
<dropdown title="Choose route" label="Routes" array="routes"  opt-value="Code" opt-description="Name"></dropdown>

そしてフィドル： http： //jsfiddle.net/wXV6Z/1/

この問題の解決策がある場合、またはおそらくそれを解決する方法について別の意見がある場合は、私に知らせてください！

ありがとう/Andreas

4

1 に答える 1

4

実際、これは機能します。必要な変更は、中括弧を削除することだけa[{{optValue}}]ですa[{{optDescription}}]。これは、そこに補間する必要がないためです。

optValueoptDescriptionはすでにスコープ内の文字列であるため、a[optValue]ディレクティブa[optDescription]のスコープで評価される式であるため、コードは正常に機能します。

これがあなたのフィドルの更新版です。

于 2013-02-19T22:12:23.483 に答える