Question

我正在使用ng-if来显示和隐藏输入框，每当我刷新页面时这样做，输入就会自动出现，并在选择隐藏的选项时出现。我附上了我的代码。任何领导都会受到赞赏。谢谢你提前:)

 <select id="notifyBy" 
         style="border:none" 
         class="formtext1 inputimg" 
         ng-model="singleSelect">

     <option  value="option1">E-mail</option>
     <option value="option2">Instant Message</option>
     <option value="option3">Telephone</option>
     <option value="option4">None</option>

</select>

<input placeholder="Please enter phone number" 
       class="formtext1" 
       ng-if ="singleSelect === Telephone"></input>

Answer 1

我认为你的singleSelect模型会有选项值而不选择文字，所以你无法测试singleSelect === Telephone，你需要测试singleSelect === option3

Answer 2

您需要初始化ng-model

<select  id="notifyBy" 
        style="border:none" 
        class="formtext1 inputimg" 
        ng-model="singleSelect"  
        ng-init="singleSelect = ''">

Answer 3

<select id="notifyBy"   
        style="border:none" 
        class="formtext1 inputimg" 
        ng-model="singleSelect">

          <option  value="option1">E-mail</option>
          <option value="option2">Instant Message</option>
          <option value="option3">Telephone</option>
          <option value="option4">None</option>
</select>

<br><br>
<input placeholder="Please enter phone number" 
       class="formtext1" 
       ng-if="singleSelect === 'option3'"></input>

Answer 4

观察：而不是与选项文字进行比较，而不是将其与ng-model值进行比较。

使用此ng-if="singleSelect == 'option3'"代替ng-if="singleSelect == 'Telephone'"

<强>样本

＆＃13;

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
   <select id="notifyBy" 
         style="border:none" 
         class="formtext1 inputimg" 
         ng-model="singleSelect">
     <option  value="option1">E-mail</option>
     <option value="option2">Instant Message</option>
     <option value="option3">Telephone</option>
     <option value="option4">None</option>
</select>
<input ng-show="singleSelect == 'option3'" placeholder="Please enter phone number" ng-model="phonenumber"
       class="formtext1"/>
</div>

＆＃13;

要从下拉列表中选择不同选项时显示输入框

4 个答案: