Description:
I am incorporating ui-router to load form pages upon clicking an icon. Every time the user clicks on the icon, a new form should load with all fields reset. By adding ng-click to the icon, we can easily reset the form values.
index.html
<td>
<a ui-sref="form2"
title="yahoo">
<span class="glyphicon glyphicon-file" ng-click="newForm('new')" id="yahooIcon" ></span>
</a>
</td>
form2.html
<input type="text" name="firstname" ng-model="myModel.firstname"><br>
app.js
$scope.newForm = function (id){
if ( id == 'new' )
{
console.log(" model value inside: "+$scope.myModel.firstname);
$scope.myModel = {};
}
}
Issue:
- The data bound to ng-model is displaying as undefined in the controller and unable to reset the model when the icon is clicked.
- In the demo, the same controller is utilized. However, if each form has its own controller apart from the index page's controller, how can the button click (ng-click) value be passed to child controllers?
DEMO ( Plunker )