4

我正在尝试创建一个下拉指令，我想通过使用指令属性指定选择 ng-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/

如果您对这个问题有解决方案，或者更有可能对如何解决它有不同的看法，请告诉我！

谢谢/安德烈亚斯

4

1 回答 1

4

实际上，这可以工作。a[{{optValue}}]您需要做的唯一更改是删除and周围的花括号a[{{optDescription}}]，因为您不需要在那里插值。

optValueandoptDescription已经是范围内的字符串，因此a[optValue]anda[optDescription]将使您的代码工作得很好，因为它们是在您的指令范围内评估的表达式。

这是您的 fiddle 的更新版本。

于 2013-02-19T22:12:23.483 回答