AngularJS：下拉指令與自定義ng選項

Question

我想創建一個下拉指令，我想指定選擇ng選項「選項值」和「選項描述」屬性通過指定它們與指令屬性。請參閱代碼以獲得更好的理解...

這是我的指令。這顯然不起作用，但我認爲它會描述我想要做什麼...

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/

如果你有解決這個問題，或者更可能的是，有一個關於如何解決它的不同意見，請讓我知道！

感謝 /安德烈亞斯

Answer 1

其實，這是可行的。您需要做的唯一更改是刪除圍繞a[{{optValue}}]和a[{{optDescription}}]的大括號，因爲您不需要在那裏進行插值。

optValue和optDescription已經在範圍字符串，所以a[optValue]和a[optDescription]將會使你的代碼工作得很好，因爲它們是在你的指令的範圍計算的表達式。

Here's an updated version of your fiddle。