Question

我正在尝试根据用户选择向DOM添加输入框：

option1其他选项3否则从dom中删除输入框，怎么办呢，我试过下面的代码但它不起作用？

html--

<select ng-model="myDropDown">
      <option value="one">One</option>
      <option value="two">Two</option>
      <option value="three">Three</option>
</select>    <p ng-if="myDropDown=='two' || ans=='three'">
   <input type="text" ng-model="fname" name="fname" />
</p>

的jsfiddle - ＆GT; http://jsfiddle.net/EZbfM/717/

Answer 1

ng-if出乎意料的原因是因为您似乎引用了古老版本的AngularJS（1.0.2）。如果您将其更新为更新版本，则ng-if将按预期工作。

请参阅此处的链接，了解与ng-if评估问题相关的问题：https://github.com/angular/angular.js/pull/4005

Answer 2

当下拉列表中的一个或三个时，是否要显示它，否则不显示？

更改

<input ng-if="myDropDown=='two'" type="text">

到

 <input ng-hide="myDropDown=='two'" type="text">

它将始终呈现，但仅显示所选的选项是一个还是三个

Answer 3

如果我理解得很好，你就是试图根据myDropDown值显示一个元素。您可以使用以下synthax在&&中将复杂表达式编写为||或ng-show：

<div ng-show="myDropDown == 'two' || myDropDown == 'three'">
    <!-- Will be displayed only when you select 'two' or 'three' -->
    <input type="text" ng-model="fname"/>
</div>

Fiddle with `ng-show`

Fiddle with `ng-if`

Answer 4

<强> DEMO

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

<div ng-app="myApp" ng-controller="MyCtrl">
  <select ng-model="myDropDown">
      <option value="one">One</option>
      <option value="two">Two</option>
      <option value="three">Three</option>
  </select>    
  <p ng-if="myDropDown=='two' || myDropDown=='three'">
    <input type="text" ng-model="fname" name="fname" />
  </p>
</div>

Answer 5

这里工作正常..

var app = angular.module('exApp', []);

app.controller('ctrl', function($scope){
$scope.myDropDown = "one";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<body ng-app="exApp" ng-controller="ctrl">
<div>
    <select data-ng-model="myDropDown">
          <option value="one">One</option>
          <option value="two">Two</option>
          <option value="three">Three</option>
    </select>
    
    <p> 
    <input ng-model="comment" ng-if="myDropDown != 'two'" type="text"> </p>
</div>
</body>

如何在角度js中切换基于输入框的选择选项？

5 个答案:

Fiddle with `ng-show`

Fiddle with `ng-if`

如何在角度js中切换基于输入框的选择选项？

5 个答案:

Fiddle with ng-show

Fiddle with ng-if

Fiddle with `ng-show`

Fiddle with `ng-if`