2016-04-07 6 views
2

入力テキストボックスのng-model値は、setAttributeメソッドを使用して設定することも、他の方法で設定することもできます。 私は、HTMLでテキストタイプ入力を複製することによってテキストボックスを追加するボタンを持っています。しかし、ボタンのonclickメソッドからクローンを作成する代わりに、テキストボックスの作成時にng-modelを設定する方法を理解することはできません。 PS:ng-modelの値は、作成されるテキストボックスごとに異なります。JavaScriptからng-model値を設定する

私はクローン化されたテキストボックスのNG-モデル値とを設定してみました
<!DOCTYPE html> 
<html> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script> 
var add = function() { 
    var txtClone = document.getElementById("textinput").cloneNode(true); 
    txtClone.setAttribute("ng-model", "name"); 
    document.getElementById("target").appendChild(txtClone); 
} 
</script> 
<body> 
    <input type="text" id="textinput" placeholder="Enter name here"> 
    <div ng-app=""> 

     <p>Input something in the input box:</p> 
     <p id="target">Name : <hr></p><button click="add()">Type</button> 
     <h1>Hello {{name}}</h1> 

    </div> 

</body> 
</html> 
ここ

ボタン(タイプ)がクリックされたとき、私はNG-アプリでdivの外に入力されたテキストをクローン化し、そこに
更新setAttribute ....しかしバインドしません。私の質問は、jsスクリプトからこのng-modelの値を設定できる方法はありますか?

+1

あなたに私のコード例を教えてもらえますか?これまでのところ? –

+0

jsfiddleまたはplunkerの例がありますか? しかし、動的コンテンツをテンプレートとして追加することができます – Zauker

+0

更新について:ディレクタまたはコントローラを使用していない理由はありますか? –

答えて

3

オーケーで動作します。

あなたができるいくつかのことがあります。

は、オブジェクトの道

のリストは、以下のコントローラを持っていると言う:

app.controller('textBoxController', function() { 

    this.textBoxList = []; 

    this.addTextBox = function() { 
     this.textBoxList.push({ 
      value: 0 
     }) 
    }.bind(this) 

}); 

そして、次のHTML:

<div ng-controller="textBoxController as txtCTRL"> 

    <div ng-repeat="item in txtCTRL.textBoxList"> 
     <input type="text" ng-model="item.value"> 

    </div> 

</div> 
+0

あなたはあなたのコードの作業jsFiddleまたはplunkrを提供できますか? –

3

ng-model値は通常、スコープ変数であり、コントローラで変更できます。

例:あなたのビューで

:あなたのコントローラで

<input type="text" ng-model="demoInput"></input>

:その例で

$scope.demoInput = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";

、あなたが$scope.demoInputを変更するたび、中値テキストボックスはそれを反映するように更新されます。

入力がng-repeatの値の配列を反復して生成されている場合でも、これは機能します。

<div ng-repeat="text in demoInputs"> 
    <input type="text" ng-model="text"></input> 
</div> 

または

<div ng-repeat="text in demoInputs track by $index"> 
    <input type="text" ng-model="demoInputs[$index]"></input> 
</div> 

私が正しくあなたを理解していれば、あなたがbasicly入力のリストにテキストボックスを追加している

for(var i=0;i<somelength;i++) 
    $scope.demoInputs[i] = 'At index ' + i; 
関連する問題