Angular Js & html - html

Question

not able to clear the data using angular Js. I have assigned the value to null and empty. when i debug it the values are getting cleared but in front end the values are not clearing
$scope.callCancel = function() {
$scope.riskObj.areaName ="";
$scope.areaName ="";
$scope.riskObj.areaDesc ="";
$scope.areaDesc =""
html code:
<div ng-if="type == 1"class="col-md-3">
<h5><strong>Risk Area Name</strong></h5>
<div class="form-group">
<input type="text" class="form-control input-sm text-field" data-ng-model="areaName" ng-keyup="getChangedAreaName(areaName)" ng-disabled="type == 2">
</div>
</div>
<div ng-if="type == 1" class="col-md-6">
<h5><strong>Risk Area Description</strong></h5>
<div class="form-group">
<input type="text" class="form-control input-sm text-field" data-ng-model="areaDesc" ng-keyup="getChangedAreaDesc(areaDesc)" ng-disabled="type == 2">
</div>
</div>
<div ng-if="type == 1" style="text-align:right;">
<img src="core/static/images/submit-btn.png" data-ng-click="updateRiskArea(areaName,areaDesc,this)" />
<img src="core/static/images/cancel-btn.png" data-ng-click="callCancel()"/>
</div>
I need to clear the values I enter in the front end. Using the above code I am able to clear already entered data. But once I modify the value and call cancel function the values are not getting cleared

Answer 1

The main issue is you're not setting your ng-model accurately. For example, it should bind to riskObj.areaName as that is your data model, not just areaName. Additionally, you should be initializing these objects in your scope somewhere, like $scope.riskObj = {areaName:'', areaDesc:''};
There are a few issues with your code other than that.
Utilize your anchor tags to be ng-click. Don't have an anchor with a hash for HREF and then put an ng-click inside on an image. Instead, just do something like <a href ng-click="...
You have 3 divs in a row with ng-if="type==1" - why not just put those 3 in a <div class="row" ng-if="type==1"> - cleaner and easier to read/maintain
Inside those conditionals, you have a ng-disabled="type==2" -- that will never ever do anything since the div will ONLY show if type=1
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.type = 1;
$scope.riskObj = {
areaName: '',
areaDesc: ''
};
$scope.callCancel = function() {
$scope.riskObj.areaName = "";
$scope.areaName = "";
$scope.riskObj.areaDesc = "";
$scope.areaDesc = ""
}
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.min.js"></script>
<div ng-app="selectExample">
<div ng-controller="ExampleController">
<div class='row' ng-if="type == 1">
<div class="col-md-3">
<h5><strong>Risk Area Name</strong></h5>
<div class="form-group">
<input type="text" class="form-control input-sm text-field" data-ng-model="riskObj.areaName">
</div>
</div>
<div class="col-md-6">
<h5><strong>Risk Area Description</strong></h5>
<div class="form-group">
<input type="text" class="form-control input-sm text-field" data-ng-model="riskObj.areaDesc">
</div>
</div>
<div style="text-align:right;">
<a href data-ng-click="callCancel()">cancel</a>
</div>
</div>
</div>