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/
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
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
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
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>
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>
Related
I am working on something which requires to come up with different options for different selections as list in forms.
for example:
If I select DR9 in System field, it has to show only 100,400,500 clients. same for QR9 - only 400 and 500.
But in my case, it's showing(100,400,500,400,500) repetitively.
Here is my code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
Password Reset
<form>
<br><label>System:</label>
<select ng-model="myVar">
<option value = "DR9">DR9</option>
<option value = "QR9">QR9</option>
<option value = "PR3">PR3</option>
</select>
<br><br>
<label>Client:</label>
<select>
<div ng-switch="myVar">
<div ng-switch-when="DR9">
<option>100</option>
<option>400</option>
<option>500</option>
</div>
<div ng-switch-when="QR9">
<option>400</option>
<option>500</option>
</div>
</div>
</select>
</form>
</div>
</body>
</html>
You cant apply ng-switch to a div with options instead add ng-switch to a div and apply ng-switch-when to select
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
Password Reset
<form>
<br><label>System:</label>
<select ng-model="myVar">
<option value = "DR9">DR9</option>
<option value = "QR9">QR9</option>
<option value = "PR3">PR3</option>
</select>
<br><br>
<label>Client:</label>
<div ng-switch="myVar">
<select ng-switch-when="DR9">
<option>100</option>
<option>400</option>
<option>500</option>
</select>
<select ng-switch-when="QR9">
<option>400</option>
<option>500</option>
</select>
<select ng-switch-default>
<option>100</option>
<option>400</option>
<option>500</option>
</select>
</div>
</form>
</div>
</body>
</html>
The template can be simplified by using the ng-options directive:
angular.module("app",[])
.controller("ctrl", function($scope) {
$scope.myVar = "PR3";
$scope.otherOptions = otherOptions("PR3");
$scope.updateOtherOptions = function(myVar) {
$scope.otherOptions = otherOptions(myVar);
};
function otherOptions(myVar) {
switch (myVar) {
case "DR9": return [100,400,500];
case "QR9": return [400,500];
default: return [100,400,500];
};
};
})
<!DOCTYPE html>
<html>
<script src="//unpkg.com/angular/angular.js"></script>
<body>
<div ng-app="app" ng-controller="ctrl">
Password Reset
<form>
<br>
<label>System:</label>
<select ng-model="myVar" ng-change="updateOtherOptions(myVar)">
<option value = "DR9">DR9</option>
<option value = "QR9">QR9</option>
<option value = "PR3">PR3</option>
</select>
<br>
Client options={{otherOptions}}
<br>
<label>Client:</label>
<select ng-model="otherSel" ng-options="sel for sel in otherOptions">
<option value="">Select...</option>
</select>
</form>
</body>
</html>
The ngOptions attribute can be used to dynamically generate a list of <option> elements for the <select> element using the array or object obtained by evaluating the ngOptions comprehension expression.
When an item in the <select> menu is selected, the array element or object property represented by the selected option will be bound to the model identified by the ngModel directive.
Optionally, a single hard-coded <option> element, with the value set to an empty string, can be nested into the <select> element. This element will then represent the null or "not selected" option.
For more information, see
AngularJS ng-options Directive API Reference
AngularJS API Reference - Using select with ngOptions and setting a default value
AngularJS ng-change Directive API Reference
I've been messing with the AngularJS's dirpagination library, please refer to link:
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
see code demo at:
http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview
I'm wondering, can I change the input box to a select box and get the same function. Eg. I'm filtering some names, but the names can only be chosen from the select box and the content will be filtered according to the input from the select box.
I have tried to achieve this by do the following:
function callFilter(Name) {
document.getElementById("search").value = Name;
}
<span style="float:right;">
<select style="height: 30px;" onchange="callFilter(this.value);">
<option value="All_Names" selected>Names</option>
</select>
<input ng-model="q" id="search" class="form-control" value="" type="hidden">
<input value="10" class="form-control" ng-model="pageSize" type="hidden">
</span>
By doing this, I managed to manipulate the hidden input box, however, the value changed in input box won't take actual action to filer my content.
What should I do? Thanks in advance!
Check code for dropdown, and demo here
<select ng-model="q" class="form-control">
<option value='' Selected>Select</option>
<option value="meal 1">Meal 1</option>
<option value="meal 2">Meal 2</option>
<option value="meal 3">Meal 3</option>
</select>
try this
$scope.getFilter = function() {
var filter = {};
filter[$scope.filter] = $scope.query;
return filter;
};
<select ng-model="filter">
<option value='firstname'>by firstname </option>
<option value='lastname'>by lastname </option>
</select>
<input ng-model='query'>
<ul>
<li ng-repeat='person in persons | filter: getFilter()'> firstname: {{person.firstname}}, lastname: {{person.lastname}}
</ul>
let me know, is this post useful or not ...
i'm a newb in angular and have some trouble to figure out how to use the values from ng-model in the correct way.
I made two drop-down lists and want to create a dependence between these two. The second list shall be displayed, depending on the user input of the first.
In this case the user shall select the kind of fermentation of a beer (here Obergärig for top-fermented) and the second drop-down should only be shown if the user took 'Obergärig'. I tried it with ng-show, but it doesn't work and i have no idea why or even if i use it the right way.
I would be very thankful if someone could give me a short explanation what i'm doing wrong.
Html for the first drop-down:
<div ng-controller="BierController">
<select ng-model="Bierart" ng-options="art as art.name for art in arten">
<option value="" disabled selected>Gärigkeit auswählen</option>
</select>
</div>
Html for the second drop-down:
<div ng-controller="OberController" ng-show="Bierart == 'Obergärig'">
<select ng-model="OberBier" ng-options="sorte as sorte.name for sorte in obere">
<option value="" disabled selected>Biersorte auswählen</option>
</select>
</div>
And here's the .js:
app.controller("BierController", function($scope){
$scope.arten=[
{name:'Obergärig'},
{name:'Untergärig'},
{name:'Keine Angabe'}
];});
app.controller("OberController", function($scope) {
$scope.obere=[
{name:'Ale'},
{name:'Altbier'},
{name:'Berliner Weiße'}
];});
That's my first post here, so i'm thankful for every advise to improve the quality of this post. Also, please excuse my bad english.
Just do the next steps:
Use the same controller for both selects.
Create some $scope variable to save the condition of the first select.(e.g. $scope.selectedBeer)
Set the condition i ng-show property of the second select.
Example:
JS file:
app.controller("BierController", function($scope){
$scope.arten=[
{name:'Obergärig'},
{name:'Untergärig'},
{name:'Keine Angabe'}
];
$scope.obere=[
{name:'Ale'},
{name:'Altbier'},
{name:'Berliner Weiße'}
];
$scope.selectedBeer = "";
});
HTML file:
<div ng-controller="BierController">
<select ng-model="selectedBeer" ng-options="art as art.name for art in arten">
<option value="" disabled selected>Gärigkeit auswählen</option>
</select>
</div>
<div ng-controller="BierController" ng-show="selectedBeer == 'Obergärig'">
<select ng-model="OberBier" ng-options="sorte as sorte.name for sorte in obere">
<option value="" disabled selected>Biersorte auswählen</option>
</select>
</div>
I may have done some syntax mistakes as I was coding this without any IDE, but the main idea is described. Good luck!
Your selects have to be managed by one controller. So, your code should look like:
<div ng-controller="BierController">
<select ng-model="Bierart" ng-options="art as art.name for art in arten">
<option value="" disabled selected>Gärigkeit auswählen</option>
</select>
<div ng-show="Bierart === 'Obergärig'">
<select ng-model="OberBier" ng-options="sorte as sorte.name for sorte in obere">
<option value="" disabled selected>Biersorte auswählen</option>
</select>
</div>
</div>
.js:
app.controller("BierController", function($scope){
$scope.arten=[
{name:'Obergärig'},
{name:'Untergärig'},
{name:'Keine Angabe'}
];
$scope.obere=[
{name:'Ale'},
{name:'Altbier'},
{name:'Berliner Weiße'}
];});
Here's the new html:
<div ng-controller="BierController">
<select ng-model="selectedBeer" ng-options="art as art.name for art in arten">
<option value="" disabled selected>Gärigkeit auswählen</option>
</select>
</br>
{{selectedBeer.name}}
<div ng-show="selectedBeer == 'Obergärig'">
<select ng-options="sorte as sorte.name for sorte in obere">
<option value="" disabled selected>Biersorte auswählen</option>
</select>
</br>
{{selectedBeer.name}}
</div>
And the .js
app.controller("BierController", function($scope){
$scope.arten=[
{name:'Obergärig'},
{name:'Untergärig'},
{name:'Keine Angabe'}
];
$scope.obere=[
{name:'Ale'},
{name:'Altbier'},
{name:'Berliner Weiße'}
];
$scope.selectedBeer = "";
});
Thanks for the advise, i'll install ng-inspect FF.
I am trying to display a field based on the value of a select in my angular app. It should be very simple: when newJob.country === 'Remote' I want my 'city' field to disappear:
HTML:
<body ng-app>
<div class="form-aside">
<label>Location</label>
<select ng-model="newJob.country" class="form-control">
<option>Remote</option>
<option>France</option>
<option>UK</option>
</select>
</div>
<div class="form-aside" ng-if="newJob.country !== 'Remote'">
<label>City</label>
</div>
</body>
For some reason it's not working. Here is the plunker: http://plnkr.co/edit/GcJNePs9zvkejnIATTiw?p=preview
How can i make this work?
Thanks
You need to define a valuefor each <option> tag.
Then you need to use ng-show with != to dynamically display your label or not.
Your plunker should work with this:
<body ng-app>
<div class="form-aside">
<label>Location</label>
<select ng-model="newJob.country" class="form-control">
<option value="remote">Remote</option>
<option value="france">France</option>
<option value="uk">UK</option>
</select>
</div>
<div class="form-aside" ng-show="newJob.country != 'remote'">
<label>City</label>
</div>
</body>
Plunker here : http://plnkr.co/edit/meqpbOVXrH4ANtQlxdoy?p=preview
Your version of Angular doesn't support ng-if.
Try :
<div class="form-aside" ng-show="newJob.country != 'Remote'">
Or update your version of Angularjs to 1.2.15, the last stable version.
i have made fiddle and put it below. i have a select option, with 2 options owner and non-owner. then based on what is picked questions are asked. i add you the answer and give back feedback. my trouble is i am trying to use a if statement to say if they are owner or not-owner and i am not sure what i should use to say if select = owner.
<div class="list owner">
Number 1: <input id="box1" type="text" /><br/>
Number 2: <input id="box2" type="text" /><br/>
Number 3: <input id="box3" type="text" /><br/>
</div>
<div class="list not-owner">
Number 4: <input id="box1" type="text" /><br/>
Number 5: <input id="box2" type="text" /><br/>
Number 6: <input id="box3" type="text" /><br/>
</div>
<button id="butt">Go</button>
<div id="output">
http://jsfiddle.net/philyphil/CcVsz/11/embedded/result/
Change your HTML code as
<select class="myOptions">
<option value="" selected>Pick an option</option>
<option value="owner">Owner</option>
<option value="not-owner">Not Owner</option>
</select>
To get value use
$('.myOptions').val();
Using this, frame your if..else.. statement.
Check this JSFiddle.
try this
change your select to this
<select id="typeselect" class="myOptions">
<option data-val="" selected="">Pick an option</option>
<option data-val="owner">Owner</option>
<option data-val="not-owner">Not Owner</option>
</select>
then the javasceipt should be
var e = document.getElementById("typeselect");
var ev = e.options[e.selectedIndex].text;
then
if(ev==='Owner'){
//code goes here
}
else{
//code goes here
}
dont forget to use three equal signs ====
Since you used semantically correct data attributes, to get the value from the selected option with your current html, you would use
var opt = $('.myoptions').find('option:selected').data('val');
and your test would then be
if ( opt == 'owner' ) {
}
I'm fairly sure you can shorten this to
var opt = $('.myoptions option:selected').data('val');
This will look strange to anyone not familiar with html 5 custom data attributes however, so you may consider using the more familiar
<option value="owner">Owner</option>
and testing and using
var opt = $('myoptions').val();
<script>
function f(a)
{
if(a=="owner")
{
do something
}
}
</script>
<select onchange=f(this.value)>
<option >Pick an option</option>
<option >Owner</option>
<option >Not Owner</option>
</select>