jquery - 追加 - angularjs 画像切り替え




Angularjs-ディレクティブやウィジェットでDOMを動的に変更しますか? (2)

これが私のやり方です。 これは単なる出発点に過ぎないことに注意してください。 対応する入力に特定の値をバインドする問題は依然として存在します。 私はそれが助けて欲しい

マークアップ:

<html ng-app="App" ng-controller="MainCtrl">

<body>

  <component index="0"></component>
  <component index="1"></component>
  Current type: {{type}}
  <button ng-click="toggleType()">Toggle</button>

</body>

</html>

指令:

var ngApp = angular.module('App', []).directive('component', function() {
  var link = function(scope, element, attrs) {
    var render = function() {
      var t = scope.layouts[scope.type][attrs.index];
      if (t === 'textarea') {
        element.html('<' + t + ' /><br>');
      }
      else {
        element.html('<input type="' + t + '"><br>');
      }
    };
    //key point here to watch for changes of the type property
    scope.$watch('type', function(newValue, oldValue) {
      render();
    });

    render();
  };
  return {
    restrict : 'E',
    link : link
  }
});

コントローラ:

var MainCtrl = function MainCtrl($scope) {
  $scope.type = 'Type1';
  $scope.types = [ 'Type1', 'Type2' ];
  $scope.layouts = {
    'Type1' : [ 'textarea', 'textarea' ],
    'Type2' : [ 'number', 'text' ]
  };

  $scope.toggleType = function() {
    if ($scope.type === 'Type1') {
      $scope.type = 'Type2';
    }
    else {
      $scope.type = 'Type1';
    }
  };
};

私の目標は、angularJSを正しく使う方法を理解することです。 私は、angularJSを使用してDOM構造を動的に変更するために、変数の選択肢を結びつけたいと考えています。 私は角が提供する文書をかなり理解しているとは思わないし、ここで、あるいは他の例も見つけられていない。 どんな助けもありがとうございます。

アイデアは、まずタイプの選択から始め、選択されたタイプから適切な入力タイプのエレメントが作成され、後でng-model(テキストエリアからチェックボックスなど)で記録されるというユースケースがあるということです。 、すべてが有効/無効のためにangularjsコントローラによって制御されます。 私は、ページ上に複製可能な要素を持ち、jQueryで新しいものを破壊して作成するという考え方に慣れていましたが、コントローラにはこのロジックを持たせるべきではなく、代わりにディレクティブ/ウィジェットで作成する必要があります。 私はこのように操作されているディレクティブやウィジェットの例は見ていませんが、どのように進めるべきかについてもわかりません。 ディレクティブを使ってDOMを操作することはできますか?

私がしたいことの例。

$scope.types = ['Type1','Type2']

// something along the lines of...
$scope.layouts = {'Type1':['textarea','textarea'], 'Type2':['numeric','datepicker']}

タイプ1を選択:

  • 2つのテキスト領域を表示する

タイプ2を選択:

  • 数値入力を表示する
  • 日付ピッカーを表示する

ありがとう、

-JR。


私がこれを行うと考えることができる最も単純な方法は、単にng-showとng-hideを使うことです。

http://jsfiddle.net/cfchase/Xn7PA/

<select ng-model="selected_type" ng-options="t for t in types">
</select>

<div ng-show="selected_type=='Type1'">
    <input type="text" id="text1" ng-model="text1"/>
    <input type="text" id="text2" ng-model="text2"/>
</div>

<div ng-show="selected_type=='Type2'">
    <input type="number" id="numeric1" ng-model="numeric1"/>
    <input type="date" id="date1" ng-model="date1"/>
</div>

もちろん、htmlにロジックを入れずにこれをクリーンアップすることもできますが、コントローラーに余分なものを入れて問題をクラウド化したくありませんでした。

検証については、 フォームのドキュメントを参照してください。 おそらくAnglesJSのビルドにはビルドされたカスタムビルドを使用しています。

ディレクティブについては、 オンラインドキュメントは高密度ですが、しばらく試してからクリックすると表示されます。 より穏やかな紹介のために、Jon LindquistはYouTubeで hello worldのチュートリアルを行っています 。 ディレクティブは間違いなくAngularでDOM操作を行う方法です。







using-directives