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>과 함께 사용하여 링크로 스타일을 지정할 수 있다는 것입니다.

또 다른 방법은 표현식의 지연 평가를 사용하여 true 일 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-disabled 및 ng-click을 사용하여 멋지게 배치하는 더러운 방법입니다.

ng-model을 요소에 추가하여 ng-disabled 작업을 수행하십시오.

---

기본적으로 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>

상태는 객체의 사용자 정의 속성이므로 원하는 이름을 지정할 수 있습니다. 에서이 CSS 클래스 이름의이 해야 하거나
disabledng-classobject.statustruefalse

function에서 모든 객체의 상태 를 변경할 수 있습니다 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