1

スコープ上のmodelプロパティに対して配列が渡されるかどうかに応じて、テキストボックスまたはドロップダウンを示す簡単なディレクティブを作成しようとしています。md-select insideディレクティブ内の複数にバインドする方法

multiple="false"のようなディレクティブマークアップに明示的に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: '=?' 
    } 
    }; 
}); 

答えて

0

おそらくこれはあなたが探している答えではありません...

(... ng-attr-multipleng-multiple)私は条件付きでmd-selectに複数の属性を設定しようとしたと何も仕事であるように思いません。おそらくそれは角物質バグです。

回避策として、atribute model.multiSelectの値に応じて、複数の属性を持つモデルとそれ以外のモデルの2つのモデルを条件付きで追加できます。例:

<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"を変更する必要がありますので、配列にする必要があるがバインドさ値複数ある場合ことに注意してください。

私はあなたのplunkerをフォークしてきたし、あなたがhere

作業例を見ることができるが、それがお役に立てば幸いです。とにかく、私は他の答えを待っています。

+1

おかげで、それは意図したとおりに動作しないことを確認していただきありがとうございます。私がそれを動作させる他の唯一の方法は、リンク関数であり、テンプレートを要求し、それをコンパイルし、DOMに追加する前に条件付きで属性を追加することです。 – click2install

関連する問題