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

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

ただいまの
回答率

90.52%

  • AngularJS

    566questions

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

AngularJs javascriptで動的に要素を作成

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,654

coko1

score 163

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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

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

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

<div ng-controller="testController as tC">
  <input ng-model="tC.value">
</div>
angular.module("test")
  .controller("testController",function(){
  this.value = "a";
}

※追記

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

 <div ng-controller="testController as tC">
  <div ng-repeat="value in tC.values">
   <p><input type="text"  ng-model="value"></p>
  </div>
 </div>
    var app = angular.module(app, []);

    app.controller("testController", function(){
        this.values = [0,1,2]
    });

※追記

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

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

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

イメージ説明

<body>
<div ng-controller="testController as tC">

 <p><input type="text"  ng-model="tC.value"></p>
 <p><input type="button" value="push" ng-click="tC.addValue()"></p>

 <div ng-repeat="item in tC.items">
  <p>{{item.value}}<input type="button" value="alert" ng-click="tC.alertValue(item)"></p>
 </div>
</div>
</body>
    var app = angular.module(app, []);

    app.controller("testController", function(){

        this.value = null;

        this.items = [];

        this.addValue = function(){

            item = {value: this.value}

            this.items.push(item);
        }

        this.alertValue = function(item){
            alert(item.value);
        }

    });

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/07 18:07

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

    キャンセル

  • 2017/04/07 22:07

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

    キャンセル

  • 2017/04/10 09:23

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

    キャンセル

  • 2017/04/10 12:42

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

    キャンセル

  • 2017/04/10 13:43 編集

    ※<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'として渡す引数を変えることはできるでしょうか?

    キャンセル

  • 2017/04/10 15:02

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

    キャンセル

  • 2017/04/10 16:07

    ぜひお願い致します。

    キャンセル

  • 2017/04/10 16:50 編集

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

    キャンセル

  • 2017/04/11 17:07

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

    キャンセル

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

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • AngularJS

    566questions

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