9

私の目標は、angularJSを正しく使用する方法を理解することです。変数の選択を、angularJSを使用してDOM構造を動的に変更することに結び付けられるようにしたいと思います。私はangularが提供するドキュメントを完全に理解しているとは思いませんし、ここやその他の例も見つかりませんでした。どんな助けでも大歓迎です。

アイデアは、最初にタイプの選択から始め、そのタイプから選択された適切な入力タイプ要素が作成され、後でng-modelで記録されるというこのユースケースがあるということです（たとえば、テキストエリアからチェックボックスまで） 、検証/制限のためにangularjsコントローラーによって制御されている間中。私はページにクローン可能な要素を置き、jQueryで新しいものを破棄して作成するという考えに慣れていますが、コントローラーにはこのロジックを持たせず、代わりにディレクティブ/ウィジェットを使用して作成する必要があることを読んでいます。ただし、このように操作されているディレクティブやウィジェットの例は見当たらないので、どのように進めるかさえわかりません。ディレクティブを使用して、監視対象の要素に基づいて、この方法でDOMを1回だけでなく、複数回操作できますか？

私がやりたいことの例。

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

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

タイプ1を選択します。

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

タイプ2を選択します。

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

2 に答える 2

13

これは私がそれを行う方法です。これは単なる出発点であることに注意してください。対応する入力の特定の値へのバインドの問題がまだあります。お役に立てば幸いです。

マークアップ:

<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';
    }
  };
};
于 2012-08-08T23:06:38.763 に答える
4

これを行うのに最も簡単な方法は、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 にロジックを追加せずにこれをクリーンアップすることもできますが、コントローラーに余分なものを追加して問題を曇らせたくありませんでした。

検証については、フォームのドキュメントを参照してください。ほとんどの場合、AngularJS に組み込まれた検証を、独自に構築したものと一緒に使用する可能性があります。

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

于 2012-08-08T01:45:14.137 に答える