ng-click 이벤트를 조건부로 하는 방법

ng-click 이벤트를 조건부로 하는 방법

ng-repeat에는 다음 코드가 있습니다.

<a href="#" class="disabled" ng-click="doSomething(object)">Do something</a>

버튼이 비활성화되어 있을 때 버튼을 비활성화하는 방법class="disabled"?

또는 다음과 같이 Javascript로 실행할 수 있는 방법이 있습니까?

$('.do-something-button').click(function(){
  if (!$(this).hasClass('disabled')) {
    do something
  }
});

지시 이외의 장소에서는, DOM(속성 체크 포함)으로 조작하는 것은 좋지 않습니다.링크를 디세블로 할지를 나타내는 값을 스코프에 추가할 수 있습니다.

단, ngDisabled는 폼컨트롤 이외에서는 동작하지 않기 때문에 <a>에서는 사용할 수 없지만 <button>에서는 사용할 수 있으며 링크로서 스타일링할 수 있습니다.

또 다른 방법은 다음과 같은 표현에 대한 게으른 평가를 사용하는 것입니다.isDisabled || action()따라서 만약의 경우 액션이 호출되지 않을 수 있습니다.isDisabled정말이에요.

다음 두 가지 솔루션을 소개합니다.http://plnkr.co/edit/5d5R5KfD4PCE8vS3OSSx?p=preview

ng-click 이벤트는 디세이블클래스를 사용하지 않고 조건부로 추가할 수 있습니다.

HTML:

<div ng-repeat="object in objects">
<span ng-click="!object.status && disableIt(object)">{{object.value}}</span>
</div>

저는 & & 표현을 사용해서 제겐 딱 맞습니다.

예를들면,

<button ng-model="vm.slideOneValid" ng-disabled="!vm.slideOneValid" ng-click="vm.slideOneValid && vm.nextSlide()" class="btn btn-light-green btn-medium pull-right">Next</button>

한다면vm.slideOneValidfalse, 표현의 두 번째 부분은 실행되지 않습니다.이것이 DOM에 논리를 넣는다는 것은 알지만, ng-disable이 되어 ng-click을 클릭하면 ng-click을 사용하여 좋은 위치를 찾을 수 있습니다.

ng-model을 요소에 추가하여 ng-disable로 동작시키는 것만 잊지 마십시오.

기본적으로ng-click먼저 체크합니다.isDisabled그리고 그 값에 따라 함수를 호출해야 하는지 여부를 결정합니다.

<span ng-click="(isDisabled) || clicked()">Do something</span>

또는 다음과 같이 읽습니다.

<span ng-click="(if this value is true function clicked won't be called. and if it's false the clicked will be called) || clicked()">Do something</span>

사용해보실 수 있습니다.ng-class.
간단한 예를 다음에 제시하겠습니다.
http://plnkr.co/edit/wS3QkQ5dvHNdc6Lb8ZSF?p=preview

<div ng-repeat="object in objects">
  <span ng-class="{'disabled': object.status}" ng-click="disableIt(object)">
    {{object.value}}
  </span>
</div>

상태는 개체의 사용자 지정 특성이므로 원하는 이름을 지정할 수 있습니다.
그disabled에ng-class는 CSS 클래스 이름입니다.object.status그래야 한다true또는false

기능에서 모든 객체의 상태를 변경할 수 있습니다.disableIt.
컨트롤러에서는 다음을 수행할 수 있습니다.

$scope.disableIt = function(obj) {
  obj.status = !obj.status
}

저도 이 문제가 있었습니다만, 「#」을 삭제하는 것만으로 문제가 발생한다는 것을 알 수 있었습니다.다음과 같이 합니다.

<a href="" class="disabled" ng-click="doSomething(object)">Do something</a>

언급URL : https://stackoverflow.com/questions/14545744/how-to-make-an-ng-click-event-conditional