Question

尝试创建一个显示文本框或下拉列表的简单指令，具体取决于是否为作用域上的model属性传递了数组。

除了在指令标记中明确设置false之外的任何内容，例如multiple="false"，都会导致多选下拉列表。

为什么这不起作用？此外，md-select值绑定不起作用（虽然文本框绑定正在工作），我怀疑是出于同样的原因。

Plunkr available here illustrating the issue

消费

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

Answer 1

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

我已尝试有条件地将多个属性设置为md-select，似乎没有任何效果（ng-attr-multiple，ng-multiple ...）。可能它是一个角质材料的错误。

因此，作为一种解决方法，您可以有条件地添加两个md-selection，具体取决于属性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]"，如您所见在上一段代码中。

我已经分叉了你的傻瓜，你可以看到一个有效的例子here

希望它有所帮助。无论如何，我还在等待其他答案。

如何绑定到md-select inside指令

1 个答案: