當隱藏元素時隱藏值

Question

我嘗試創建一個選擇框。選擇框和輸入文本的值會顯示以下<hr>標籤像

輸入文本時，在選擇框值Two纔會顯示。但是當我切換到其他值在選擇框中使輸入顯示無。但價值不會消失。當輸入被隱藏時，我試圖使這個值消失。怎麼做，謝謝。

這裏是我的

function Controller ($scope) { 
 
    $scope.myDropDown = 'one'; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app ng-controller="Controller"> 
 
    <select ng-model="myDropDown"> 
 
      <option value="one" selected>One</option> 
 
      <option value="two">Two</option> 
 
      <option value="three">Three</option> 
 
    </select> 
 
    <br> 
 
    <input ng-model="test" ng-show="myDropDown=='two'" type="text"> 
 
    <hr>  
 
    {{myDropDown}} {{test}} 
 
</div>

Answer 1

這裏是你的代碼：

function Controller ($scope) { 
 
    $scope.myDropDown = 'one'; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app ng-controller="Controller"> 
 
     <select ng-model="myDropDown"> 
 
       <option value="one" selected>One</option> 
 
       <option value="two">Two</option> 
 
       <option value="three">Three</option> 
 
     </select> 
 
     <br> 
 
     <input ng-model="test" ng-show="myDropDown=='two'" type="text"> 
 
     <hr>  
 
     {{myDropDown}} <span ng-show="myDropDown=='two'">{{test}}</span> 
 
    </div>

這裏有另外一個解決方案，我更喜歡：

function Controller ($scope) { 
 
    $scope.myDropDown = 'one'; 
 
    $scope.showMe = false; 
 
    $scope.changevalue = function(a){ 
 
    if(a == 'two'){ 
 
     $scope.showMe = true; 
 
    } 
 
    else{ 
 
     $scope.showMe = false; 
 
     $scope.test = null; 
 
    } 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app ng-controller="Controller"> 
 
    <select ng-model="myDropDown" ng-change="changevalue(myDropDown)"> 
 
    <option value="one" selected>One</option> 
 
    <option value="two">Two</option> 
 
    <option value="three">Three</option> 
 
    </select> 
 
    <br> 
 
    <input ng-model="test" ng-show="showMe" type="text"> 
 
    <hr>  
 
    {{myDropDown}} {{test}} 
 
</div>