如何在Angular JS中切換基於輸入框的選擇選項？

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-> 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值的元素。 您可以將復雜表達式寫為&&或|| 在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>

用`ng-show`擺弄

用`ng-if`擺弄

Answer 4

演示

 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>

如何在Angular JS中切換基於輸入框的選擇選項？

問題描述

5 個解決方案

解決方案1
2 2017-04-25 07:51:45

解決方案2
0 2017-04-25 07:09:11

解決方案3
0 2017-04-25 07:14:20

用`ng-show`擺弄

用`ng-if`擺弄

解決方案4
0 2017-04-25 08:01:44

解決方案5
0 2017-04-25 08:09:23

如何在Angular JS中切換基於輸入框的選擇選項？

問題描述

5 個解決方案

解決方案1 2 2017-04-25 07:51:45

解決方案2 0 2017-04-25 07:09:11

解決方案3 0 2017-04-25 07:14:20

用ng-show擺弄

用ng-if擺弄

解決方案4 0 2017-04-25 08:01:44

解決方案5 0 2017-04-25 08:09:23

解決方案1
2 2017-04-25 07:51:45

解決方案2
0 2017-04-25 07:09:11

解決方案3
0 2017-04-25 07:14:20

用`ng-show`擺弄

用`ng-if`擺弄

解決方案4
0 2017-04-25 08:01:44

解決方案5
0 2017-04-25 08:09:23