Question

这看起来像是一项平凡的任务，但我似乎无法将下拉菜单重置为原始状态。我正在为下拉列表中的每个值使用ng-switch。我研究了这个，我似乎无法找到任何与我的问题有关的文档。有类似的问题已经得到解答，我看过angularAPI，但似乎没有解决我的问题。

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>

每当从下拉列表中选择一个值时，ng-switch就会激活。这会放置文本并删除下拉列表。重置后，下拉列表应重新出现，ng-switch文本应消失。基本上将所有内容重置为原始状态。

我有点担心发布任何问题，因为任何时候我都会被投票和责骂。我希望这个问题具体到足以帮助你。

Answer 1

您的代码存在一些问题。

首先，您不需要为每个案例定义新的ng-switch。 ng-switch的工作方式类似于switch语句，因此您只需要一个ng-switch，其中包含每个ng-switch-when div。像这样：

  <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>

其次，您的ng-hide逻辑对于下拉选择有点缺陷。您正在将form1设置为重置功能中的空对象，但选择的ng-hide基于正在设置的time1隐藏。如果您想在设置time1时隐藏下拉列表，则需要将time1设置为null才能再次显示，如下所示：

$scope.time1 = null;

请参阅随附的plunkr，了解您正在尝试做的事情。

https://plnkr.co/edit/kWxysaCoRcK1XP7XNczL

角度：在下拉列表中重置ng-switch

1 个答案: