I'm currently working on a form that includes fields for name, email, and phone number.
<div ng-show="Nerd.adding">
<form class="col-sm-6" name="Nerd.nerdAddFrm" novalidate >
<div class="form-group">
<label for="inputName">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Name" ng-model="Nerd.nerd.name" required >
</div>
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" ng-model="Nerd.nerd.email" required >
</div>
<div class="form-group">
<label for="inputPhone">Phone</label>
<input type="text" class="form-control" id="inputPhone" placeholder="Phone" ng-model="Nerd.nerd.phone" required >
</div>
<button ng-click="Nerd.saveNerd(Nerd.nerd)" type="submit" class="btn btn-primary">Submit</button>
<button ng-click="Nerd.load()" type="button" class="btn btn-default">Cancel</button>
</form>
</div>
In the above code snippet, you can see that clicking the cancel button triggers the Nerd.load() function in the controller. This function resets the view and clears all the data binded to the model.
Nerd.load = function () {
Nerd.editing = false;
Nerd.adding = false;
Nerd.nerd = [];
nerdResource.query(
function (data) {
Nerd.nerds = data;
}
);
};
I've noticed that when I set Nerd.nerd to an empty array, it successfully empties out the data for Name and Phone fields. However, upon returning to the page, the previously inputted data still appears. The page doesn't reload, as divs are shown or hidden based on controller variables like
<div ng-show="Nerd.adding">My AngularJS version is 1.3.14. Any guidance on resolving this matter would be greatly appreciated.
Thank you.