動的な値を持つテンプレートページを動的に追加する方法

実際に私はangularJSの新機能ですので、あなたにはばかげているかもしれないいくつかの基本的な質問があります。私はjQueryを少し慣れています。なぜなら、ドキュメントが非常に限られているので、混乱があるのはなぜかというだけです。私はクリックして（ID = D）セクション動的な値を持つテンプレートページを動的に追加する方法

更新それは、AJAXを呼び出す値を取得し、DIVに（template.html言う）テンプレートでそれをレンダリングする必要があります）（showdivを呼び出すたび

<!Doctype> 
    <html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Example - example-example12-production</title> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script> 
    </head> 
    <body ng-app="docsTemplateUrlDirective"> 
     <div ng-controller="Controller as c"> 
     <button ng-click="c.showdiv()">show</button > 
     <div id="d"></div> 
    </div> 
<script> 

angular.module('docsTemplateUrlDirective', []) 
    .controller('Controller', ['$scope', function($scope) { 
this.showdiv=function(){ 

    //do the ajax call and get the value from server 
    //pick the required template 
    //render the returned value on picked template 

} 
}]); 
</script> 
    </body> 
    </html>

は私がしたいです：1.私たちは2つのbutton.ifボタン1がクリックされていると、それはbutton2のtemplate2.htmlのためにtemplate1.html anfを選ぶでしょう。 {「AnyName」、「年齢」、「名」、「25」}として

2.ajax戻るtemplate1.htmlにおけるその等が異なるテンプレートとボタン2の異なる値に対して

<div> 
{{Name}},{{Age}} 
</div>

ように結合していますスタイル。

出典

2016-09-13 Joe

テンプレートとそのコンテンツは両方とも動的でなければなりませんか？またはテンプレートは常にtemplate.htmlですか？ –

また、コントローラー定義内に閉じ角かっこがありません –

「必要なテンプレートを選んでください」というのは、サーバーからIDまたは何かが戻ってきているということですか？サーバーは何を返しますか？ Btwはajax呼び出しのために$ httpをチェックアウトします。そして、おそらく "this"を "$ scope"に変更したいと思うでしょう。 – Tom

言うためにあなたのdiv "D" 更新：

<div id="d" ng-include="chosenTemplate"></div>

更新ボタン：

<button ng-click="c.showdiv('template1.html')">show 1</button > 
<button ng-click="c.showdiv('template2.html')">show 2</button >

は、その後、次のようなものを追加します。

this.showdiv = function(theTemplate) { 

    $scope.chosenTemplate = theTemplate; 

    // do AJAX call using $http.get 
    $scope.Name = "John Smith"; 
    $scope.Age = 25; 
}

も注意してください。

上記のようにabovあなたはスコープにshowdiv関数を追加することができるので、 "c"という接頭辞を付ける必要はありません。あなたのhtmlで。

コントローラーの定義の最後に、上記のように閉じ角カッコがありません]。

出典

2016-09-13 16:48:15

ありがとう、うまくいきました。私は/これがサーバーサイドの値を取得し、テンプレートでそれをレンダリングする良い方法かもしれないと思います。 – Joe

動的な値を持つテンプレートページを動的に追加する方法

答えて

関連する問題