从 javascript 设置 ng-model 值答案

【问题标题】：Set ng-model value from javascript从 javascript 设置 ng-model 值
【发布时间】：2016-07-28 14:41:41
【问题描述】：

是否可以使用 setAttribute 方法或其他任何方式设置输入文本框的 ng-model 值。我有一个按钮，通过在 html 中克隆文本类型输入来添加文本框。但我无法弄清楚如何在创建文本框时设置 ng-model，而是从按钮的 onclick 方法克隆。 PS：不同的文本框创建时，ng-model的值是不同的。

更新

<!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-app 克隆了 div 外部的输入文本，
在那里我尝试使用 setAttribute.. 设置克隆文本框的 ng-model 值，但它没有绑定。我的问题是有什么方法可以从 js 脚本中设置这个 ng-model 值？

【问题讨论】：

您能否给我一个代码示例来说明您目前所拥有的内容？
你有 jsfiddle 或 plunker 的例子吗？但是可以将动态内容添加为模板
关于您的更新：您有没有使用指令或控制器的原因？
不，没有明确的原因......我刚刚上传了一个短代码......我只是问有没有什么办法可以设置 ng-model 的属性使用 setAttribute 设置元素？？

标签： javascript angularjs

【解决方案1】：

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>

将与

for(var i=0;i<somelength;i++)
    $scope.demoInputs[i] = 'At index ' + i;

【讨论】：

【解决方案2】：

好的，如果我理解正确，您基本上是在将文本框添加到输入列表中。

你可以做几件事：

对象方式列表

假设你有以下控制器：

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>

【讨论】：

你能提供一个工作的 jsFiddle 或 plunkr 你的代码吗？？