質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Q&A

解決済

1回答

4923閲覧

AngularJs javascriptで動的に要素を作成

coko1

総合スコア276

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

0グッド

0クリップ

投稿2017/04/07 06:19

javascript

1var _input = document.createElement('input'); 2_input.type = 3_input.id = '_input';

上記のようにすればjs側で要素を作成して、プロパティを設定できると思うのですが、'ng-model'などの指定はjs側で出来ないのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ng-modelはcontrollerのプロパティをあたかもHTMLに紐づいているように同期させる機能です。
JavaScriptでプロパティを設定し、HTMLでどのタグにどのプロパティが紐づくのかを設定します。このときに、HTML側のタグに記載するのがng-modelです。

もしjs側で作る要素に対してng-modelを使いたいということであれば、作る要素をHTMLのタグにあらかじめ設定しておけば良いかと思います。

意図に沿った回答でしょうか。

HTML

1<div ng-controller="testController as tC"> 2 <input ng-model="tC.value"> 3</div>

javascript

1angular.module("test") 2 .controller("testController",function(){ 3 this.value = "a"; 4}

※追記

ng-repeatの使い方の例です。
この例では要素数は不定ではありませんが、要素数が増えるとその分HTMLに要素が増えていきます。
それぞれの要素に対してng-modelも使えます。

HTML

1 <div ng-controller="testController as tC"> 2 <div ng-repeat="value in tC.values"> 3 <p><input type="text" ng-model="value"></p> 4 </div> 5 </div>

javascript

1 var app = angular.module(app, []); 2 3 app.controller("testController", function(){ 4 this.values = [0,1,2] 5 });

※追記

不定の要素を画面上で追加し、それぞれの要素をalertする処理

上のインプットに値を入力し、pushボタンを押すと、値がJavaScript上で追加されていきます。
同時に、pushボタンの下に入力した値+alertというボタンが出てきます。
alertをクリックすると、それぞれの要素の値がalertされます。
こんな感じのことをしたいのではないかと思っていますがいかがですか。コードはかなり簡略に記載しましたが解説は必要ですか。

ng-repeat="item in tC.items"というところがポイントで、items配列の中の要素であるitemがng-repeat内で自由に使うことができるようになっています。

イメージ説明

HTML

1<body> 2<div ng-controller="testController as tC"> 3 4 <p><input type="text" ng-model="tC.value"></p> 5 <p><input type="button" value="push" ng-click="tC.addValue()"></p> 6 7 <div ng-repeat="item in tC.items"> 8 <p>{{item.value}}<input type="button" value="alert" ng-click="tC.alertValue(item)"></p> 9 </div> 10</div> 11</body>

JavaScript

1 var app = angular.module(app, []); 2 3 app.controller("testController", function(){ 4 5 this.value = null; 6 7 this.items = []; 8 9 this.addValue = function(){ 10 11 item = {value: this.value} 12 13 this.items.push(item); 14 } 15 16 this.alertValue = function(item){ 17 alert(item.value); 18 } 19 20 });

投稿2017/04/07 08:05

編集2017/04/10 07:58
akabee

総合スコア1947

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

coko1

2017/04/07 09:07

JS側で作成する要素が不定のため、HTMLで固定の数を記述してもあまり意味がないのです。
akabee

2017/04/07 13:07

不定数の要素をjavascriptで作成し、それを表示・値の変更等するために、HTML上に反映させたいということですか?ng-repeatが該当の機能かと思いますが、検討されましたでしょうか。
coko1

2017/04/10 00:23

質問者でありながら回答に遅れて申し訳ありません。 ng-repeatについて調べたのですが使い方がよくわかりませんでした。
akabee

2017/04/10 03:42

回答編集しました。ng-repeatの例です。
coko1

2017/04/10 04:46 編集

※<li><a></a></li>の要素を動的に作成したい。 <ul> <li><a href="" ng-click="scrollTo('test1')"></a></li> <li><a href="" ng-click="scrollTo('test2')"></a></li> <li><a href="" ng-click="scrollTo('test3')"></a></li> </ul> 上記のような要素を動的に作るとして、ng-clickの関数呼び出しの引数に1つめの要素は'test1'、2つ目の要素は'test2'として渡す引数を変えることはできるでしょうか?
akabee

2017/04/10 06:02

ng-repeatで利用できる$indexという予約語があります。これを使えばやりたいことはできると思います。参考→http://qiita.com/Quramy/items/1a4c4bdc02a362a4c22d コードの例示が希望であればもう少し後ほどになりますが記載しておきます。
coko1

2017/04/10 07:07

ぜひお願い致します。
akabee

2017/04/10 07:51 編集

記載しておきました。参考にして下さい。$indexは使用しないほうが簡明でしたので使用しませんでした。
coko1

2017/04/11 08:07

ありがとうございます!期待することが出来ました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問