条件付き追加html属性を追加するには？

Question

angularjsに条件付き属性を追加するにはどうすればよいですか？

たとえば、属性を<select>に設定するには、コンポーネントのバインディングがtrueに設定されている必要があります。つまり、バインディングが指定されていない場合、複数の属性が私の<select>に存在すべきではありません。

私が見つけた唯一の解決策はng-ifでした。

Answer 1

ブールconditionは、あなたがのプロパティmultipleを処理するために（別名ng-multiple）ディレクティブを実装することによって、これを達成することができません

<select ng-if="condition" ng-model="some.model" multiple></select> 
<select ng-if="!condition" ng-model="some.model"></select> 


<select ng-show="condition" ng-model="some.model" multiple></select> 
<select ng-hide="condition" ng-model="some.model"></select> 

コントローラ、

$scope.condition = true

Answer 2

他に、複数のその後、真である場合select要素。次のスニペットは、このソリューションを実装しています。しかしmultiple小道具で選択された値の配列が生成されると、小包でmultipleとnon-multipleの間で切り替えるときに問題が発生する可能性があるので、non-multipleが単一のオブジェクトを生成すると、このdirectiveの内部でモデルの状態を制御できます。

angular.module('myApp', []) 
 
    .directive('ngMultiple', function() { 
 
    return { 
 
     require: ['select', '?ngModel'], 
 
     restrict: 'A', 
 
     scope: { 
 
     multiple: '=ngMultiple' 
 
     }, 
 
     link: function (scope, element, attrs, ctrls) { 
 
     
 
     element.prop('multiple', scope.multiple); 
 
     
 
     scope.$watch('multiple', function (multiple) { 
 
      if(element.prop('multiple') != multiple){ 
 
      // may be would be convenient change the ngModel 
 
      // to [] or {} depending on the scenario 
 
      element.prop('multiple', multiple); 
 
      } 
 
     }); 
 
     } 
 
    }; 
 
    }) 
 
    .controller('myController', function ($scope) { 
 
    $scope.condition = true; 
 
    $scope.myOptions = []; 
 
    }); 
 

 
angular.element(document).ready(function() { 
 
    angular.bootstrap(document, ['myApp']); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<div ng-controller="myController"> 
 
    <label> 
 
    <input type="checkbox" ng-model="condition" /> multiple? 
 
    </label> 
 
    <br> 
 
    <select ng-multiple="condition" ng-model="myOptions"> 
 
    <option>Option 1</option> 
 
    <option>Option 2</option> 
 
    <option>Option 3</option> 
 
    <option>Option 4</option> 
 
    <option>Option 5</option> 
 
    </select> 
 
    <br> 
 
    <tt>myOptions: {{ myOptions }}</tt> 
 
</div>