2017-11-29 9 views
2

これは非常に日常的な作業のようですが、元の状態に戻すことはできません。私はドロップダウンから各値のngスイッチを使用しています。私はこれを研究して、私は私の問題に関する文書を見つけることができないようです。同様の質問がありましたが、私は角度APIを見てきましたが、私の問題を解決するものはありません。angular:ドロップダウン時にng-switchをリセットする

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テキストが消えます。基本的にすべてを元の状態にリセットします。

質問を投稿するのは少し不安です。いつでも私は投票して叱ってしまうからです。私はこの質問が十分に具体的であることを願っています。

+0

この質問は、ちょうど(jsfiddle plnkrまたはcodepenへの理想的なリンクを手助けしたい人のためのそれが容易になります)あなたはここで行ったように、最小限の再生を含めるようにしてください良いです。あまりにも個人的には、あまりにも多くの研究や努力をしている不明な質問や質問に不満を感じる私のようなボランティアだけではなく、 – shaunhusain

+0

@shaunhusain、ありがとうございました。私はちょっと良く感じる:) –

答えて

1

コードにいくつかの問題があります。

まず、すべてのケースで新しいng-switchを定義する必要はありません。 ng-switchはswitch文のように機能するので、内部にng-switch-whenの各divを持つng-switchが1つだけ必要です。これと同じように:

<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を設定していますが、time1が設定されているため、選択のng-hideが隠れています。あなたはtime1が設定されている場合、ドロップダウンを非表示にする場合、あなたはそのように、再びそれを示すために、nullにtime1を設定する必要があります

$scope.time1 = null; 

は何(と思う)ん例えば添付plunkrを参照してください。あなたはやろうとしている。

https://plnkr.co/edit/kWxysaCoRcK1XP7XNczL

+0

それはすばらしく働いた!ご協力ありがとうございました。どのように関数がスイッチの名前を呼び出すのかを見ることができます(選択後にアクティブなものであるtime1)。time1はnullになります。効果的にすべてを元の状態に戻します。あなたが言ったように: –

+0

あなたは歓迎です:)。あなたが気にしないなら正解とマークしてください! – james00794

+0

完了!私は実際にこのフォームに4つのドロップダウンを持っています。私は$ scope.time1-time4をそれぞれ次のように使用することで、それらをすべて動作させることができました:\t var app = angular.module( 'myForm'、[]); app.controller( 'MainCtrl'、関数($範囲){ $ scope.reset =関数(){ $ scope.time1 = NULL; \t $ scope.time2 = NULL; \t $ scope.time3 = null; \t $ scope.time4 = null; }; });私は、 'plunkr'という名前を使用するのではなく、モジュール名として 'myForm'を使うなど、私のフォームに合うようにいくつか変更しました。再度、お手伝いいただきありがとうございます。 –

関連する問題