如何在 md-select inside 指令中绑定到多个 [英] How to bind to multiple in md-select inside directive
问题描述
尝试创建一个简单的指令,根据是否为范围上的 model
属性传递数组来显示文本框或下拉列表.
除了在指令标记中显式设置 false
之外的任何事情,例如 multiple="false"
,都会导致多选下拉列表.
为什么这不起作用?此外,md-select 值绑定不起作用(尽管文本框绑定起作用),我怀疑出于同样的原因.
消费者
<content-filter ng-repeat="filter in filters" flex="filter.width" model="filter.model" value="filter.value"></content-filter>
消费者控制器
app.controller('MainCtrl', function($scope){$scope.filters =[{模型:{多选:假,项目:[{标签:'全部',价值:'全部'},{标签:'失败',值:'失败'},{标签:'成功',价值:'成功'}]},价值:'全部',宽度:'50%'},{值:'123',宽度:'50%'}];});
指令
app.directive('contentFilter', function(){返回 {限制:'E',替换:假,模板: '\<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-选择>\</md-input-container>\<md-input-container flex layout="fill" ng-if="!model">\<input type="text" aria-label="{{ label }}" ng-model="value"/>\</md-input-container>',范围:{值:'=',型号:'=?'}};});
可能这不是您要找的答案...
我尝试将多个属性有条件地设置为 md-select
,但似乎没有任何效果(ng-attr-multiple
、ng-multiple代码>...).可能是角度材质的错误.
因此,作为一种解决方法,您可以根据属性 model.multiSelect 值有条件地添加两个 md-select:一个具有多个属性,另一个没有它.示例:
重要提示:请记住,如果 md-select
是多个,则绑定的值需要是一个数组,因此您必须更改 ng-model="value"
每个 ng-model="[value]"
,正如您在前面的代码中看到的那样.
我已经分叉了你的 plunker,你可以在这里看到一个工作示例>
希望有帮助.无论如何,我会等待其他答案.
Trying to create a simple directive that shows a textbox or dropdown depending on whether an array is passed for a model
property on the scope.
Anything except explicitly setting false
in the directive markup e.g., multiple="false"
, results in a multi-select dropdown.
Why is this not working? Also, md-select value binding is not working (although textbox binding is working), I suspect for the same reason.
Plunkr available here illustrating the issue
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>
Consumer Controller
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%'
}
];
});
Directive
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: '=?'
}
};
});
Probably this is not the answer you are looking for...
I've tried to conditionally set multiple attribute to md-select
and nothing seems to be work (ng-attr-multiple
, ng-multiple
...). Probably it's an angular-material bug.
So, as a workaround, you could conditionally add two md-selects, depending on the atribute model.multiSelect value: one with multiple attribute and the other one without it. Example:
<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>\
IMPORTANT: Keep in mind that if the md-select
is multiple, the value binded needs to be an array, so you will have to change ng-model="value"
per ng-model="[value]"
, as you can see in the previous code.
I've forked your plunker and you can see a working example here
Hope it helps. Anyway, I'll be waiting for other answers.
这篇关于如何在 md-select inside 指令中绑定到多个的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!