ng-optionsとng-checkedのフォーム内の高級な運用（推奨）

2990 ワード
ng。 ジャッキー モデル
AnglarJSは現在非常に流行している先端フレームで、文法飴が非常に多く、先端開発者にも非常に便利ですが、使い方を考えてみます。
ng-options
selectフォームコントロールにおいて、現在のいくつかの書き方をまとめます。
普通の書き方

<select>
  <option value="test1">test1</option>
  <option value="test1">test1</option>
  <option value="test1">test1</option>
  <option value="test1">test1</option>
</select>
長所：簡単
短所:
  • コードは簡潔ではないので、選択肢が多いと乱れます。
  • レンダリングが不便で、もしoptionが変わるなら、js動的ローディングを使用する必要があります。
  • は、オブジェクトを格納するのに不便である
    • 。
    ng-repeatを使う
    ng-repeatはangglarJSの中で非常に強力なdirectiveで、レンダリングリストの上で極めて大きな便利さがあります。フロントエンドの開発者は、複数の重複したoptionがありますので、もちろん、ng-repeatを使ってもいいです。使い方は以下の通りです。
    
<select>
  <option ng-repeat="option in options" value="{{option}}">{{option.name}}</option>
</select>
<script>
  $scope.options = [{id:1,name:'test1'},{id:2,name:'test2'},{id:3,name:'test3'}];
</scirpt>
    利点:
  • コード概略
  • はオブジェクトを記憶してもいいです。
    短所:
  • はデフォルトの表示がありません。いくつかのインターフェースニーズの中で、selectはplceholderのような表示提示効果を必要とするかもしれないが、この方法を使って効果を表示するのはデフォルトでは空白
    • である。
  • は、現在選択されている値
    • をng−modelで取得できない。
    ng-optionsを使う
    ここでは一学年、クラスのオプションを使って、例として、学年を選んでから対応するクラスを表示します。
    
<select ng-model="modal.grade" ng-change="modalChangeGrade()" ng-options="grade.gradeText for grade in modal.grades">
  <option value="" disabled>   </option>
</select>
<script>
  $scope.modal.grades = [
  {id:1,gradeText:'  ',classes:[]},
  {id:2,gradeText:'  ',classes:[]},
  {id:3,gradeText:'  '},classes:[]];
  $scope.modalChangeGrade = function(){
    //   HTML         
    $scope.modal.classes = $scope.modal.grade.classes;
  }
</scirpt>
    注:
    「のoptionを選択してください。valueが必要です。でないと、エラーが発生します。
    デフォルトの選択値を設定するには、最初から「高い1」を選択すると、行列内のオブジェクトを設定する必要があります。
    
$scope.modal.grade = $scope.modal.grades[2];//           2
    利点:
  • コードは簡潔で、維持しやすいです。
  • デフォルト表示があります。
  • は、現在選択されているオブジェクト
    • を、ng−modalを使用して正確に取得することができる。
    ng-checked
    checkboxとradioはよく使われているフォームコンポーネントですが、現在選択されているオブジェクトを簡単に入手するにはどうすればいいですか？
    ここではangglarJsの使い方だけを言います。
    次は相変わらず学年とクラスを例にします。
    
<div ng-repeat="class in grade.classes" ng-click="class.is_checked=!class.is_checked">
  <input type="checkbox" value="" ng-checked="class.is_checked">
  {{class.id+' '}}
</div>
    最後にどのようなチェックボックスが選択されているかを確認したいのですが、scope.grade.classes配列を巡回して、どのようなオブジェクトがあるかを確認する必要があります。checked属性はtrueでいいです。
    ラジオの使い方は同じです。
    以上は小编でご绍介したng-optionsとng-checkedのフォームの中の高级な运用です。皆様に助けてほしいです。もし何かご质问があれば、メッセージをください。小编はすぐにご返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
    C((zhi)印刷とプレビュー機能の構想とコードを印刷することを実現します。
    C〓の中の動態はコンポーネント（属性と事件）の実現の構想と方法を創建します。