Angular Js & 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;">
                        <a href="#" data-toggle="modal" data-target="#submission"><img src="core/static/images/submit-btn.png" data-ng-click="updateRiskArea(areaName,areaDesc,this)" /></a>
                        <a href="#"><img src="core/static/images/cancel-btn.png" data-ng-click="callCancel()"/></a> 
                        </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>