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=".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?
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./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?
- 1 Can you give me a code example of what you have so far? – Marc Rasmussen Commented Apr 7, 2016 at 15:39
- have you a jsfiddle or plunker example? however dynamic content could be added as template – Zauker Commented Apr 7, 2016 at 15:40
- Regarding your update: is there a reason your not using either a directive or a controller? – Marc Rasmussen Commented Apr 7, 2016 at 15:47
- 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 Commented Apr 8, 2016 at 3:00
2 Answers
Reset to default 4ng-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./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;
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>