尝试创建一个显示文本框或下拉列表的简单指令,具体取决于是否为作用域中的model属性传递数组。
除了在指令标记中显式设置false之外,任何东西(例如,multiple="false" )都会导致多选择下拉列表。
为什么这不管用?另外,md-select值绑定不起作用(尽管textbox绑定有效),我怀疑是出于同样的原因。
Consumer
<div ng-app='home' layout-padding layout="row">
<content-filter ng-repeat="filter in filters" flex="filter.width" model="filter.model" value="filter.value"></content-filter>
</div>消费者控制器
app.controller('MainCtrl', function($scope)
{
$scope.filters =
[
{
model:
{
multiSelect: false,
items:
[
{
label: 'All',
value: 'all'
},
{
label: 'Fail',
value: 'fail'
},
{
label: 'Success',
value: 'success'
}
]
},
value: 'all',
width: '50%'
},
{
value: '123',
width: '50%'
}
];
});指令
app.directive('contentFilter', function()
{
return {
restrict: 'E',
replace: false,
template: '\
<md-input-container flex layout="fill" ng-if="model && model.items.length">\
<md-select ng-model="value" multiple="model.multiSelect === true">\
<md-option ng-repeat="item in model.items" ng-value="{{ item.value }}">{{ item.label }}</md-option>\
</md-select>\
</md-input-container>\
<md-input-container flex layout="fill" ng-if="!model">\
<input type="text" aria-label="{{ label }}" ng-model="value" />\
</md-input-container>',
scope:
{
value: '=',
model: '=?'
}
};
});发布于 2016-08-27 12:17:54
也许这不是你想要的答案..。
我试图有条件地将多个属性设置为md-select,但似乎没有什么是可行的(ng-attr-multiple,ng-multiple.)。可能是角质的虫子。
因此,作为一种解决办法,您可以有条件地添加两个md-select,这取决于attribute model.multiSelect值:一个具有多个属性,另一个没有属性。示例:
<md-input-container flex layout="fill" ng-if="model && !model.multiSelect && model.items.length">\
<md-select ng-model="value">\
<md-option ng-repeat="item in model.items" value="{{ item.value }}">{{ item.label }}</md-option>\
</md-select>\
</md-input-container>\
<md-input-container flex layout="fill" ng-if="model && model.multiSelect && model.items.length">\
<md-select ng-model="[value]" multiple>\
<md-option ng-repeat="item in model.items" value="{{ item.value }}">{{ item.label }}</md-option>\
</md-select>\
</md-input-container>\重要:请记住,如果md-select是多个的,绑定的值需要是一个数组,因此您必须更改每个ng-model="[value]"的ng-model="value",就像您在前面的代码中看到的那样。
我已经把你的柱塞叉开了,你可以看到一个有用的例子这里
希望能帮上忙。不管怎样,我会等其他答案的。
https://stackoverflow.com/questions/39179869
复制相似问题