조건부 추가 html 속성을 추가하는 방법은 무엇입니까?

Question

angularjs에 조건부 속성을 추가하는 방법은 무엇입니까?

예를 들어 내 구성 요소에 바인딩이 true로 설정된 경우 속성을 <select>에만 설정하려고합니다. 즉, 바인딩이 제공되지 않으면 다중 속성이 내 <select>에 없어야 함을 의미합니다.

내가 찾은 유일한 해결책은 ng-if를 사용하는 것입니다.

Answer 1

condition 부울 후 여러에 해당하는 경우, 다른하지

<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

당신은 지침을 구현하여이를 달성 할 수있다 (일명 ng-multiple가)의 재산 multiple을 처리하는 select 요소 다음 스 니펫은이 솔루션을 구현합니다. 그러나 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>