Set ng-model value from javascript

3
votes

Is there any way the ng-model value of an input text box can be set using setAttribute method or in any other way. I have a button that adds textbox by cloning text type inputs in html. But I cannot figure out how to set the ng-model as the textboxes are created, rather cloned from the onclick method of the button. PS: the value for ng-model is different for different textboxes as they are created.

Update
<!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>

Here I cloned the input text outside the div with ng-app when the button(Type) is clicked,
there I tried set the ng-model value of the cloned textbox with setAttribute.... but it does not bind. My question is that is there any way I can set this ng-model value from the js script?

2
javascriptangularjs
Can you give me a code example of what you have so far? - Marc Rasmussen
have you a jsfiddle or plunker example? however dynamic content could be added as template - Zauker
Regarding your update: is there a reason your not using either a directive or a controller? - Marc Rasmussen
no there is no definite reason...... I just uploaded a short code...... I am just asking is there any way i can set ng-model like an attribute of an element is set using setAttribute?? - Avijeet Ghosh

2 Answers

3
votes

Okay if i understand you correctly you are basicly adding textboxes to a list of inputs.

There are several things you could do:

The list of object way

say you have the following controller:

app.controller('textBoxController', function () {

    this.textBoxList = [];

    this.addTextBox = function () {
        this.textBoxList.push({
            value: 0
        })
    }.bind(this)

});

And the following html:

<div ng-controller="textBoxController as txtCTRL">

    <div ng-repeat="item in txtCTRL.textBoxList">
       <input type="text" ng-model="item.value">

    </div>

</div>
3
votes

ng-model values are typically just scope variables, which you can modify in your controller.

Example:

In your view:

<input type="text" ng-model="demoInput"></input>

In your controller:

$scope.demoInput = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";

In that example, any time you change $scope.demoInput, the value in the textbox will update to reflect it.

This works even if the inputs are being generated with ng-repeat iterating over an array of values.

<div ng-repeat="text in demoInputs">
    <input type="text" ng-model="text"></input>
</div>

or

<div ng-repeat="text in demoInputs track by $index">
    <input type="text" ng-model="demoInputs[$index]"></input>
</div>

will work with

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