how to toggle input box based select option in angular js?

Question

I am trying to add an input box to the DOM based on the user selection:

option1 other option 3 otherwise remove input box from dom, how can do it, i tried bellow code but it is not working?

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/

it is visible to dom right inside style="display:none", ng-if is true that i want apend inut box to DOM , ng-if is false then i want remove completely from DOM input box, please help me any one — ramesh 1226
– ramesh 1226, Commented Apr 25, 2017 at 7:27

oakgun · Accepted Answer · 2017-04-25 07:51:45Z

2

The reason ng-if is behaving unexpectedly is because you seem to have referenced an ancient version of AngularJS (1.0.2). If you update it to a more recent version, ng-if will work as expected.

See the link here for the issue related to the evaluation issue of ng-if: https://github.com/angular/angular.js/pull/4005

answered Apr 25, 2017 at 7:51

oakgun

1702 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Reinard Truter · Accepted Answer · 2017-04-25 07:09:11Z

0

Do you want to show it when the dropdown is on one or on three, otherwise not?

change

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

to

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

It will always render then, but only show if the option chosen is one or three

answered Apr 25, 2017 at 7:09

Reinard Truter

695 bronze badges

1 Comment

ramesh 1226 Over a year ago

it is visible to dom right inside style="display:none", ng-if is true that i want apend inut box to DOM , ng-if is false then i want remove completely from DOM input box

Mistalis · Accepted Answer · 2017-04-25 07:44:42Z

0

If I understand well, you are trying to display an element based on myDropDown value. You can write complex expressions as && or || in ng-show with the following synthax:

<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`

edited Apr 25, 2017 at 7:44

answered Apr 25, 2017 at 7:14

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

6 Comments

ramesh 1226 Over a year ago

it is visible to dom right inside style="display:none", ng-if is true that i want apend inut box to DOM , ng-if is false then i want remove completely from DOM input box, please tell me only i want use ng-if

Mistalis Over a year ago

@ramesh1226 As the selection may change, it is better, in terms of performance, to use ng-show in this specific case instead. It avoid the user to create/delete/create/delete elements in the DOM

Mistalis Over a year ago

@ramesh1226 Anyway, it works the same with ng-if. Note that you will need Angular 1.1+ (for example this Fiddle works in 1.5).

ramesh 1226 Over a year ago

ng-show , in-hide uses , input box will show like this display :none / block, i don't want this , i need input box completly remove from DOM, that is posible only ng-if, how can i do it

Mistalis Over a year ago

@ramesh1226 See my previous comment + my updated answer. I've made Fiddle that works with ng-if and removed the element from the DOM. Please accept the answer if it solved your issue :)

|

Rohìt Jíndal · Accepted Answer · 2017-04-25 08:01:44Z

0

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>

answered Apr 25, 2017 at 8:01

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

Comments

Manikandan Velayutham · Accepted Answer · 2017-04-25 08:09:23Z

0

Here is working fine..

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>

answered Apr 25, 2017 at 8:09

Manikandan Velayutham

2,2281 gold badge17 silver badges22 bronze badges

Collectives™ on Stack Overflow

how to toggle input box based select option in angular js?

5 Answers 5

Comments

1 Comment

Fiddle with `ng-show`

Fiddle with `ng-if`

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related