隐藏元素时隐藏值

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>