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

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

나는 NG-disable을 사용하고 있어, 마음에 들어.입력과 버튼에 도움이 됩니다.앵커 태그가 작동하지 않는 경우.어떻게 고칠 수 있죠?

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 class를 사용하여 앵커에 적용합니다.

<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.

양식 컨트롤이 속성을 사용하지 않도록 설정했지만 앵커 태그에 사용 안 함 속성이 없습니다.

angular's ng-disabled가 부트스트랩의 btn 클래스와 함께 작동하는 이유를 선택합니다.

링크를 비활성화하기 위해 사용자 필드를 설정할 수 있습니다.

<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; }

컨트롤러 측 코드에 사용합니다.

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

보기:

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

언제ng-Disabled에 대해 평가된.true, 를 설정합니다.disabled일반적으로 입력 또는 기타 양식 제어인 요소의 속성. <a>태그에는 없습니다.disabled설정되지 않도록 속성을 지정합니다.의 설정을 시도합니다.ng-disabled에의 링크에true직접 보게 될 거야

아마 이게 도움이 될 거야: NG-disabled And Anchor Tags Oh Noes!

네, 앵커 태그를 비활성화할 수 있습니다. 어떻게 해야 하는지 알아보겠습니다.앵커는 클릭할 수 있습니다.먼저 클릭을 무효로 하고 포인터 이벤트를 통해 비활성화 시킬 수 있습니다.none. 다음으로 비활성화 시킬 필요가 있는 색상을 #95979A;와 같이 변경할 수 있습니다.여기서 무슨 일이 일어나고 있는지 알아야 합니다.상기를 추가해도 앵커 태그의 클릭 이벤트가 비활성화되지 않습니다.disabeld=disabled로 Atribute event를 추가하는 ng-disabled를 추가하지 않으려면 a[disabled]를 사용하여 해당 이벤트를 캡처해야 합니다.

최종 코드: a[disabled] {pointer-events: none; color: #95979A;}은(는) 앵커 태그의 클릭 이벤트를 사용하지 않도록 설정합니다.

도움이 됐으면 좋겠네요.감사해요.

가장 좋은 방법은 비활성화된 조건을 앵커 기능에 추가하는 것입니다.따라서 이 함수는 디세이블 상태가 체크되고 통과되었을 때만 실행됩니다.

$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];
    }

}

위의 예에서는 비활성화된 조건을 함수에 삽입하여 다음 및 미리 페이지 부착 앵커를 비활성화하였습니다.사용자들은 똑똑하다.곧 끝 페이지임을 알게 되고 다음을 클릭할 수 있지만 아무 일도 일어나지 않습니다.

네비게이션 버튼 조작에도 같은 문제가 있었습니다만, 이 회피책은 제 프로젝트에 있어서 좋은 해결책이었습니다.

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

개 있다$scope 「」,nextItem ★★★★★★★★★★★★★★★★★」prevItem 1개씩, 1개씩.따라서 다음(또는 이전) 태그가 없는 경우 태그는 올바르게 스타일링됩니다(따라서 비활성화되어 있습니다).

nextItem.null입니다.href에 제공되다href="/the-link/i-want-to-use"는 null "href"가.href="#".

앵커 태그에 비활성화된 특성이 없습니다.앵커 태그에 "disabled" 클래스를 사용했습니다.

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

하시면 됩니다.ng-href를 중지하다

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

html

<a ng-click="disabled()" ng-class="{disabled: isLinkDisabled}">LINK TO Disable</a>

app.module

$scope.disabled = function() {
        $scope.isLinkDisabled = true;
    }

CSS

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

a-disabledng-disabled

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

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