2016-12-20 3 views
0

사용자 클릭시 DOM에 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를 사용하여 배열의 항목 당 하나의 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> 

그리고 추가 버튼을 겨 클릭에이 도움이

Plunker Link

희망을 배열에 빈 값을 밀어!