AngularJS-ng-disabled가 앵커 태그에 대해 작동하지 않음

AngularJS-ng-disabled가 앵커 태그에 대해 작동하지 않음

---

나는 ng-disabled를 사용하고 있습니다. 입력과 버튼에 대해 잘 작동합니다. 앵커 태그가 작동하지 않습니다. 어떻게 고칠 수 있습니까?

HTML code

<a ng-disabled="addInviteesDisabled()">Add</a>

JS code

  $scope.addInviteesDisabled = function() {
      return $scope.event.status === APP_CONSTANTS.STATUSES.PENDING_APPROVAL;
  };

---

하이퍼 링크에는 비활성화 된 속성이 없습니다. 다음과 같이 할 수 있습니다.

.disabled {
  cursor: not-allowed;
}

<a ng-click="disabled()" ng-class="{disabled: addInviteesDisabled()}">Add</a>

$scope.disabled = function() {
  if($scope.addInviteesDisabled) { return false;}
}

---

linkDisabledCSS 클래스를 만들어 앵커에 적용 할 수 있습니다.

<style>

.linkDisabled {
  cursor: not-allowed;
  pointer-events: none;
  color: grey;
}

</style>

---

CSS를 통해이 작업을 수행 할 수 있으며 멋진 지시문이 필요하지 않습니다. ng-class를 사용하여 다음과 같은 클래스를 적용하십시오.

ng 클래스 :

ng-class="{disabledLink: disabledFunction()}"

css :

.disabledLink {
    color: #ccc;
    pointer-events:none;

}

전체 신용-

https://css-tricks.com/pointer-events-current-nav/

---

을 사용하여 앵커 태그를 비활성화 할 수 없습니다 ng-disabled.

양식 컨트롤에는 비활성화 된 속성이 있지만 앵커 태그에는 비활성화 속성이 없습니다.

확인 왜 각의는 겨 장애인 않는 부트 스트랩의 BTN 클래스와 작품?

---

예 친구 앵커 태그를 비활성화 할 수 있습니다. 어떻게해야하는지 살펴 보겠습니다. 앵커는 클릭 가능합니다. 먼저 클릭을 비활성화해야합니다. 포인터 이벤트를 통해 수행 할 수 있습니다. none; 사용이 비활성화되어 있음을 보여주기 위해 색상과 같이 비활성화해야하는 색상을 변경할 수 있습니다. # 95979A ;. 여기서 무슨 일이 일어나는지 이해해야합니다. 위의 내용을 추가해도 앵커 태그의 클릭 이벤트가 비활성화되지는 않습니다. 이를 중지하려면 속성 이벤트를 disabeld = disabled로 추가하는 ng-disabled를 추가해야합니다. a [disabled]를 사용하여이를 포착해야합니다.

따라서 최종 코드 : a [disabled] {pointer-events : none; color : # 95979A;} 는 앵커 태그의 클릭 이벤트를 비활성화합니다.

이것이 도움이 되었기를 바랍니다. 감사

---

링크 비활성화를 위해 fieldset을 사용할 수 있습니다.

<input type="checkbox" ng-model="vm.iagree"> I Agree
      <fieldset ng-disabled="!vm.iagree">
               <a class="btn btn-primary grey" href="javascript:void(0)" ng-click="vm.Submit()">Submit</a>
      </fieldset>

---

앵커 태그를 직접 비활성화 할 수는 없습니다.

컨트롤러에 두 개의 속성 할당

public bool btndisabled { get; set; }
public string href { get; set; }

And use it for controller side code :

if (auction.btndisabled== true)
            {
                auction.href = "javaScript:void(0);";
            }
            else
            {
                auction.href = "/Auction/Index?id=" + auction.Auction_ID;
            }

In your view :

<a href="{{item.href}}"><input type="button" class="btn btn-primary" ng-disabled="item.btndisabled" value="Update"/></a>

---

When ng-Disabled evaluated to true, sets the disabled attribute on the element which is generally an input, or other form control. <a> tags don't have disabled attributes so it will never be set. Try setting the ng-disabled on your link to true and you will see for yourself.

Maybe this will help: ng-disabled And Anchor Tags Oh Noes!

---

The best way is to add the disabled condition into the function of the anchor. Thus, the functions only perform when the disabled condition is checked and passed.

$scope.next_kh_resource = function(){
    if ($scope.selected_kh_index < ($scope.selected_step.step_kh_resources.length -1)){
        var next = $scope.selected_kh_index + 1;
        $scope.selected_kh_index = $scope.selected_kh_index +1;
        $scope.selected_kh_resource = $scope.selected_step.step_kh_resources[next];
    }
}
$scope.prev_kh_resource = function(){
    if ($scope.selected_kh_index > 0){
        var prev = $scope.selected_kh_index -1;
        $scope.selected_kh_index = prev;
        $scope.selected_kh_resource = $scope.selected_step.step_kh_resources[prev];
    }

}

In the example above, I disabled the pagination anchors next and prev by inserting the disabled condition into the functions. The users are smart. They will soon learn that its the end page and they can click next but nothing will happen

---

i had the same problem doing a navigation buttons, this workaround was a good solution for my project!

<a href="{{nextItem ? '/the-link/i-want-to-use' : '#'}}" ng-class="{'iamDisabled':!nextItem}">Some link text</a>

Basically, there are two buttons (made with links tags) one for next and other for previous. there are two $scope variables, nextItem and prevItem , one for each button. So if there is no next (or previous) the tag will be styled properly (so you see its disabled).

When nextItem is not null, the href will be rendered to href="/the-link/i-want-to-use" and when is null, href will be href="#".

---

No disabled attribute in anchor tag. Used "disabled" class for anchor tag.

$scope.data = {name:dinesh}
<a ng-click="get_data()" ng-class="{disabled: data}">Add</a>

---

Use a-disabled instead of ng-disabled

  <a a-disabled="addInviteesDisabled()">Add</a>

참고URL : https://stackoverflow.com/questions/30479105/angularjs-ng-disabled-not-working-for-anchor-tag