当隐藏元素时隐藏值

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>