如何为ng-model提供动态值

时间:2016-12-20 17:26:09

标签: angularjs html5 angular-ngmodel

我在用户点击时将div附加到DOM中。要获取用户输入的值,我想将ng-model附加到输入字段。由于我不知道用户将追加的div的总数,我想保持ng-model中的值动态。

以下是代码:( my-Controller)

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++;
    };

// html我想放置动态ng-model

<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 个答案:

答案 0 :(得分:1)

您可以使用ng-repeat动态添加输入框

   <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

希望这有助于!!