web-dev-qa-db-ja.com

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;
  };
javascripthtmlangularjs
59
user4870812

ハイパーリンクの無効な属性はありません。あなたはこれを行うことができます：

.disabled {
  cursor: not-allowed;
}

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

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

linkDisabled cssクラスを作成して、アンカーに適用できます。

<style>

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

</style>
22
paul

CSSを介してこれを行うことができます。派手なディレクティブは必要ありません。 ng-classを使用して、次のようなクラスを適用します。

ng-class：

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

css：

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

}

完全なクレジット-

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

9
user3009021

ng-disabledを使用してアンカータグを無効にすることはできません。

フォームコントロールには無効なプロパティがありますが、アンカータグには無効なプロパティがありません。

チェック なぜangleのng-disabledはブートストラップのbtnクラスで動作するのですか？

6
Anik Islam Abhi

ユーザーはフィールドセットを有効にして、リンクを無効にできます。

<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>
1
vicky

はい、アンカータグを無効にすることができます。そのために必要なことを確認してください。アンカーはクリック可能です。まず、クリックを無効にするためにneddします。これは、ポインターイベントによって行うことができます。そして、無効になっている使用を示すために、色のように無効にする必要のある色を変更できます：＃95979A;。ここで何が起こっているのかを理解する必要がありますが、上記を追加してもアンカータグのクリックイベントは無効になりません。それを止めるには、ng-disabledを追加する必要があります。これは、disabeld = disabledとして属性イベントを追加します。a[disabled]を使用してそれをキャッチする必要があります。

最終コード：a [disabled] {pointer-events：none; color：＃95979A;}は、アンカータグのクリックイベントを無効にします。

これが役に立てば幸いです。ありがとう

1
pallavnav

この質問は以前に回答されました： AngularJSを使用してアンカータグを有効/無効にする

カスタムディレクティブを使用するか、代わりにボタンを使用してください。

1
Komo

アンカータグを直接無効にすることはできません。これを行うことができます。

コントローラーで2つのプロパティを割り当てる

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>
1
Rauf Master

アンカータグに無効な属性はありません。アンカータグに「無効」クラスを使用しました。

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

最良の方法は、無効化された条件をアンカーの機能に追加することです。したがって、これらの関数は、無効な条件がチェックされて渡された場合にのみ実行されます。

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

}

上記の例では、無効化された条件を関数に挿入することにより、nextおよびprevのページネーションアンカーを無効にしました。 ユーザーは賢いです。 彼らはすぐにその終了ページを学習し、次をクリックできますが、何も起こりません

0
locnguyen

ナビゲーションボタンの操作で同じ問題が発生しました。この回避策は私のプロジェクトに適したソリューションでした。

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

基本的に、次のボタンと前のボタンの2つのボタン（リンクタグで作成）があります。 2つの$scope変数、nextItemおよびprevItemがあり、各ボタンに1つずつあります。そのため、次（または前）がない場合、タグのスタイルは適切に設定されます（そのため、無効になっています）。

nextItemがnullでない場合、hrefはhref="/the-link/i-want-to-use"にレンダリングされ、nullの場合、hrefはhref="#"になります。

0
Lucho

ng-Disabledがtrueに評価されると、通常は入力またはその他のフォームコントロールである要素にdisabled属性を設定します。 <a>タグにはdisabled属性がないため、設定されません。リンクのng-disabledをtrueに設定してみてください。自分で確認できます。

多分これが役立つでしょう： ng-disabled And Anchor Tags Oh Noes！

0
adamjld