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

Show us also the HTML code, to check how do you bind variables to the elements. — AvgustinTomsic
– AvgustinTomsic, Commented Nov 18, 2022 at 10:00

Kinglish · Accepted Answer · 2022-11-19 21:46:18Z

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>

answered Nov 19, 2022 at 21:46

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nancy Over a year ago

Hi, I tried this code its working fine when I dont edit the value and select cancel. But when i edit the name and description am not able to clear the input fields. If any changes are made in the name or description am not able to clear it

Kinglish Over a year ago

Sorry I don't understand. The snippet seems to work fine for me. What changes are you referring to?

Collectives™ on Stack Overflow

Angular Js & html

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related