如何为 ng-model 赋予动态值答案

【问题标题】：How to give dynamic values to ng-model如何为 ng-model 赋予动态值
【发布时间】：2016-12-20 17:26:08
【问题描述】：

我在用户点击时将一个 div 附加到 DOM 中。为了让用户输入值，我想将 ng-model 附加到输入字段。由于我不知道用户将附加的 div 的总数，我想保持 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++;
    };

//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>

【问题讨论】：

不要进行 DOM 操作。使用 ng-repeat 为数组的每一项显示一个 DOM 元素。要添加 DOM 元素，只需向数组中添加一项即可。

标签： angularjs html angular-ngmodel

【解决方案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>

并在 ng-click 的添加按钮时将一个空值推送到数组

Plunker Link

希望这有帮助！

【讨论】：