2016-12-20 4 views
0

私はユーザーのクリック時にdivにdivを追加します。ユーザーが入力した値を取得するには、ng-modelを入力フィールドに追加します。ユーザーが追加するdivの総数がわからないので、ng-modelの動的値を保持したいと考えています。ここで ng-modelに動的な値を与える方法

はコードです:(私の-コントローラ)

function addDiv() { 
     var element = angular.element(document.createElement('my-Directive')); 
     var el = $compile(element)($scope); 

     //where to place the element 
     angular.element($('#add')).append(element); 
     $scope.insertHere = el; 

     //giving unique id to div element. 
     var objName = 'step'+number; 
     dataCtrl.tbt = { 
      "val": objName, 
      "tes":"arjun" 
     } 
     $(element).attr("id",objName); 
     console.log(objName); 
     number++; 
    }; 

私はあなたがにng-repeatを使用することができます

<div class="form-group"> 
<div class="col-xs-4"> 
    <label for="target">Target:</label> 
</div> 
<div class="col-xs-7"> 
    <input id="target" placeholder="Target" ng-model="dataCtrl.tbt[dataCtrl.tbt.val]" type="text" class="form-control"/> 
</div> 

+1

DOM操作を行わないでください。 ng-repeatを使用して、配列の項目ごとに1つのDOM要素を表示します。 DOM要素を追加するには、配列に項目を追加するだけです。 –

答えて

1

ダイナミックNG-モデルに入れたい// HTML入力ボックスを動的に追加する

<div ng-repeat="in in input"> 
     <label>{{$index+1}}</label><input type="text" ng-model="in.value"> 
    </div> 
<button ng-click="addInput()">Add</button> 

し、[追加]ボタンのNGクリック

Plunker Link

・ホープ、このことができます上の配列に空の値をプッシュ!

関連する問題