CODEWITHSUNDEEP
javascripthtmlangularjs
Robin J
Robin J

Reputation: 25

angular: Resetting ng-switch on dropdown

This seems like such a mundane task, but i can't seem to reset the dropdowns to the original state. I'm using ng-switch for each value from the dropdown. I have researched this and I can't seem to find any documentation pertaining to my problem. There are similar questions that have been answered, and I have looked at the angularAPI, but none seem to fix my problem.

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

</head>

<body ng-app = ""> <!--using the body to initialize the application-->
<p>Survey Form</p>
<form name="form1" method="post" action="">
  <fieldset>
      <p>
        <label>Email:
          <input type="text" name="cust_email" id="cust_email">
        </label>
      </p>
      <p>Please rate the following times from best (1) to worst (4)</p>

      <div ng-app = "myForm" ngController = "formControl">
      <p>
            <select id="option1" ng-hide = "time1" ng-model = "time1" value = "option1">
                <option value="1">1. Best time</option>
                <option value="2">2. Next Best time</option>
                <option value="3">3. Not as good</option>
                <option value="4">4. Worst time</option>
            </select>      
            Monday/Wednesday 10:10am-Noon
      </p>


      <div ng-switch = "time1" name = "switch1"><!--time1 module is reserved for Monday/Wednesday 10:10am-Noon dropdown-->
        <div ng-switch-when = "1"><!--when value 1 from the dropdown is selected-->
            <h3>This time is the: Best Time.</h3><hr><!--display this-->
        </div>
      </div>
      <div ng-switch = "time1">
        <div ng-switch-when = "2">
            <h3>This time is the: Next Best Time.</h3><hr>
        </div>
      </div>
      <div ng-switch = "time1">
        <div ng-switch-when = "3">
            <h3>This time is the: Not as good.</h3><hr>
        </div>
      </div>
      <div ng-switch = "time1">
        <div ng-switch-when = "4">
            <h3>This time is the: Worst Time.</h3><hr>
        </div>
      </div>
<p>
        <input type="submit" name="button" id="button" value="Submit">
        <input type="reset" name="button2" id="button2" value="Reset" ng-click = "reset()">
      </p>


      </div>

angular:

<script>
    angular.module('myForm', []).controller('formControl', function ($scope){
        $scope.reset = function(){
            $scope.form1 = {};
        };
        });

      </script>

  </fieldset>  
</form>

<p>&nbsp;</p>
</body>
</html>

Whenever a value is selected from the dropdown, the ng-switch activates. This places text and removes the dropdown. Upon reset, the dropdown should reappear and the ng-switch text should disappear. Basically resetting everything to its original state.

I'm a little apprehensive to post any questions because any time I do I get down voted and scolded. I hope that this question is specific enough to help.

Upvotes: 2

Views: 1183

Answers (1)

james00794
james00794

Reputation: 1147

A couple issues with your code.

First thing is that you don't need to define a new ng-switch for every case. ng-switch works like a switch statement, so you only need one ng-switch with each of the ng-switch-when divs inside. Like so:

  <div ng-switch="time1">
    <div ng-switch-when="1"><!--when value 1 from the dropdown is selected-->
      <h3>This time is the: Best Time.</h3><hr><!--display this-->
    </div>
    <div ng-switch-when="2">
      <h3>This time is the: Next Best Time.</h3><hr>
    </div>
    <div ng-switch-when="3">
      <h3>This time is the: Not as good.</h3><hr>
    </div>
    <div ng-switch-when="4">
      <h3>This time is the: Worst Time.</h3><hr>
    </div>
  </div>

Second, your ng-hide logic is a bit flawed for the dropdown select. You are setting form1 to an empty object in your reset function, but the select's ng-hide is hiding based on time1 being set. If you want to hide the dropdown when time1 is set, you need to be setting time1 to null to show it again, like so:

$scope.time1 = null;

See the attached plunkr for an example that does what (I think) you are trying to do.

https://plnkr.co/edit/kWxysaCoRcK1XP7XNczL

Upvotes: 1

Related Questions