隐藏元素时隐藏值

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>

​