如何在md-select内部指令中绑定多个 [英] How to bind to multiple in md-select inside directive

问题描述

尝试创建一个简单的指令，以显示文本框或下拉列表，具体取决于是否为范围内的model属性传递了数组.

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.

除了在指令标记(例如multiple="false")中显式设置false以外的所有内容都会导致多选下拉列表.

Anything except explicitly setting false in the directive markup e.g., multiple="false", results in a multi-select dropdown.

为什么这不起作用?另外，我怀疑出于同样的原因，md-select值绑定无效(尽管文本框绑定有效).

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可在此处说明问题

消费者

<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: '=?'
    }
  };
});

推荐答案

可能这不是您要寻找的答案...

Probably this is not the answer you are looking for...

我试图有条件地将多个属性设置为md-select，但似乎没有任何效果(ng-attr-multiple，ng-multiple ...).可能是一个有角度的材料错误.

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.

因此，作为一种解决方法，您可以根据属性模型有条件地添加两个md-selects.multiSelect值:一个具有多个属性，另一个具有不带属性.示例:

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>\

重要提示:请记住，如果md-select是多个，则绑定的值必须是一个数组，因此，您必须每个ng-model="[value]"更改ng-model="value"，如您在前面的代码中所见./p>

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.

我为您的朋克叉了起来，您可以在此处

希望它会有所帮助.无论如何，我将等待其他答案.

Hope it helps. Anyway, I'll be waiting for other answers.

这篇关于如何在md-select内部指令中绑定多个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！