10

この質問は、Tami Wright によってメーリング リストで尋ねられました...

私は JQuery から AngularJS の世界に移行しようとしていますが、JQuery では非常に簡単な特定のユース ケースをどのように変換すればよいかよくわかりません。そのユースケースは、同じフォーム内の選択要素の変更に基づいて、フォーム要素を有効化/無効化または非表示/表示することです。これを機能させるために誰かが喜んで共有できるアイデア/提案/ポインタはありますか?

そして、私がここでやろうとしていることを理解するために、説明するコードをいくつか示します。

$('#ddl').change( function (e) {
                var selectedValue = $(this).val();
                switch(selectedValue){
                    case 1:
                         // Hide/show or enable/disable form elements here with Javascript or Jquery

// Sample enable code 
            document.getElementById("username").readOnly = false;
            document.getElementById("username").style.background = "transparent";
            document.getElementById("username").style.color = "#000000"; 


// Sample disable code 
            document.getElementById("first_name").readOnly = true;
            document.getElementById("first_name").style.color = "#c0c0c0"; 
                                    break;          
                }
                return false;
            });

前もって感謝します、

タミ・ライト

4

2 に答える 2

19

AngularJS の主要な設計目標の 1 つは、アプリケーション開発者が DOM をほとんど、またはまったく操作せずに Web アプリケーションを構築できるようにすることです。多くの場合、これはプログラミングのより宣言的なスタイルにもつながります。これにより、ビジネス ロジックの単体テストが容易になり、アプリケーションの開発速度が大幅に向上します。

jQuery のバックグラウンドを持つほとんどの人は、DOM 操作に基づいた開発、特に DOM をアプリケーションのドメイン モデルとして使用することから抜け出すのに少し苦労しています。

AngularJS では、ユーザー イベントやデータの変更に基づいて入力要素の外観を非常に簡単に変更できます。上記の問題を解決する方法の一例を次に示します。

これが実際のデモです: http://plnkr.co/edit/zmMcan?p=preview

<html ng-app>
<head>
  ...
  <style type="text/css">
    .disabled {
      color: #c0c0c0;
      background: transparent;
    }
  </style>
</head>
<body ng-init="isEnabled=true">

  <select ng-model="isEnabled" ng-options="choice == 'Enabled' as choice for choice in ['Enabled', 'Disabled']"></select><br>

  User Name: <input ng-model="userName" ng-readonly="!isEnabled" ng-class="{ disabled: !isEnabled }"><br>
  First Name: <input ng-model="firstName" ng-readonly="!isEnabled" ng-class="{ disabled: !isEnabled }">
</body>

命令型コードを記述する代わりに、入力のクラスと読み取り専用属性が select の値にバインドされていることを宣言できることがわかります。これは、必要に応じて、コントローラーで値を複雑に計算することで強化できます。

于 2012-11-08T11:24:55.330 に答える
4

ディレクティブに関する AngularJS の公式ドキュメントから:

ディレクティブは、HTML の新しいトリックを教える方法です。DOM のコンパイル中に、ディレクティブが HTML と照合され、実行されます。これにより、ディレクティブは動作を登録したり、DOM を変換したりできます。

Angular には、Web アプリケーションの構築に役立つ一連のディレクティブが組み込まれていますが、HTML を宣言型ドメイン固有言語 (DSL) に変換できるように拡張できます。

入力を有効/無効にするために、AngularJS の方法で最も簡単な方法は、次のngDisabledディレクティブを使用することです。要素の表示/非表示には、次のngShowおよびngHideディレクティブを使用します

AngularJS には、これらすべての優れた例があります。

于 2013-01-13T21:37:28.883 に答える