How to remove blank option from select when ng-model is empty? - javascript

I have a scenario where I have a select dropdown with a refresh button and a plus button. When I click on the refresh button the model is set to null, but when I click on the plus button the dropdown is shown with empty option. So, I need to display the dropdown without empty option, where ng-model is null only.
Here is my code:
<div class="col-xs-6 npd">
<div ng-if="minAge==null">
<select ng-options="minAge.val as minAge.txt for minAge in ddloptions" ng-model="minAge" ng-change="ageCheck()">
</select>
<p>Select <br><span>Minimum age</span></p>
</div>
<div ng-if="minAge!=null">
<a ng-click="minAgeRmv()"><img src="images/prf-mprmv.png" /></a>
<p>Minimum age <br><span>{{minAge}}</span></p>
</div>
</div>
Any help would be appreciated.

In case you want to remove the empty option, you can put this empty option inside select <option value="" style="display:none;">Select Age ...</option>

I think this should work. It will filter out anything that is null (All values where minAge.txt is not null).
<select ng-options="minAge.val as minAge.txt for minAge in ddloptions | filter:{minAge.txt:'!!'}"
ng-model="minAge" ng-change="ageCheck()">

Use Array.prototype.filter method to filter out any property with a null
ddloptions = ddloptions.filter(function(item) {
return item.minAge !== null;
});
Either use it inside your controller when you refresh your data or put it inside an Angular Filter

Related

Angular - my ngIf hides an input-label only once

*ngIf="currentIdea.oetSupportNeeded" I have a dropdown list with 2 values - yes and no, and another input label where you can write freely. I want to show the input-label only when user chose "yes" in the dropdown list and to hide it when "no" is chosen.
My problem is that the following code works only once - when page loads and "no" is chosen, the input label is hidden, but when you choose "yes" and then "no" again, the label shows up and doesn't disappear anymore. I want it to toggle on/off depending on the user's choice
I tried using ngShow, ngHide, [disabled], etc. Nothing helped
<div class="select-wrapper" [ngClass]="{'select-wrapper-blocked': isNotAdmin()}">
<select class="input-control" [(ngModel)]="booleanVariable">
<option value="false">No</option>
<option value="true">Yes</option>
</select>
</div>
</div>
<div class="col form-input" [ngClass]="{'form-input-blocked': isNotAdmin()}">
<p class="input-label">
Some text
</p>
<input *ngIf="booleanVariable" class="input-control" [(ngModel)]="stringVariable" />
</div>
According to the code you shared, the value of your select menu is bound to the booleanVariable property of your component.
Your *ngIf queries another property, so the condition is wrong. You should be checking the booleanVariable in the condition.
Something similar happened to me few hours ago. The problem was that
<option value="false">No</option>
<option value="true">Yes</option>
was wrong. I solved it with
<option [value]="false">No</option>
<option [value]="true">Yes</option>
That's because otherwise Angular does not "analyze" the value of the option but recognizes it as a string.
Use ngModelChange event and make a function to typecast the data.
Check the link for example. Show Hide Field using *ngIf
You are using true and false as strings. You can change the test into your ngIf.
Like
<select [(ngModel)]="foo">
<option [ngValue]="true">true</option>
<option [ngValue]="false">false</option>
</select>
<input *ngIf="foo == true"/>
And to define a default value, you can set the value of foo into the class like
public foo = true;

Angular select model not setting value

I have an array of strings, that are account numbers. When a record in a table is clicked i provide a modal to update the record and one of the fields is account number. This displays and some what correctly but seems to loss its two way binding with vm.accountNumber but also does show the value that the model is.
vm.accountNumber always has a value that is set when the table row is being clicked for editing. It just never makes it to the select despite the model. I suspect im losing the two way link and it is creating its own variable for the model.
<select class="ui search fluid selection dropdown" id="accountSearch" ng-model="vm.accountNumber">
<!--ng-options="account for account in vm.accounts.slice(1)">-->
<option ng-repeat="account in vm.accounts | limitTo: vm.accounts.length : 1" value="account" ng-selected="account == vm.accountNumber">{{account}}</option>
</select>
Here is a snippet of the accounts array.
0:"-"
1:"0001"
2:"0002"
3:"0003"
4:"0004"
I would say just use ng-options directive instead of ng-repeating option
<select class="ui search fluid selection dropdown"
id="accountSearch" ng-model="vm.accountNumber"
ng-options="account for account in vm.accounts">
</select>
Demo Plunkr
Though I'd like to point out your problem was with option value attribute,
you should change
value="account"
to
value="{{account}}"

Semantic UI: Dropdown default/placeholder value issue

I'm working on creating a html form using 'Semantic UI' framework. While I'm using a normal select item for a dropdown/select list, I'm styling it using Semantic UI. Everything works fine, but once I select a value from the dropdown, I can't deselect the option/value as an end user.
Suppose in this FIDDLE , if I select 'male', and again want to de-select the option and show the placeholder/default text 'Gender', I'm not able to. Can someone help me figure out a way to make the select work as a regular html select item rather than a dropdown ?
HTML Code
<div class="field">
<label style="width: 250px">Select a Gender</label> <select
name="skills" class="ui fluid dropdown">
<option value="">Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
JavaScript Code
$(".ui.fluid.dropdown").dropdown({})
Try this :
$('select.dropdown').dropdown({placeholder:'Your placeholder'});
see Semantic UI (or Semantic UI CN for a Chinese version) for more info.
In the classic HTML <select> element, it treats your empty valued <option value="">Gender</option> as another dropdown menu item.
However, Semantic UI uses the empty valued <option> as the placeholder text. If you want Gender as a selectable option, it should really be another item that is independent of your placeholder text.
If you want the ability to clear the selection, I think there are better UX paradigms to handle this. For example, you could have an external clear selection button which calls:
$('.ui.fluid.dropdown').dropdown('clear')
Another more streamlined option might be to use the multi-selection dropdown, and limit the maxSelections = 1, the first example from the examples page. That way the user gets an impression that they have selected something, and to clear the selection they use an element within the same dropdown container.
You should know that .dropdown() in Semantic UI removes any null value from your select by default.
Nevertheless, there are some approaches to what you are looking for.
Check this fiddle.
You can achieve this with the snippet below.
<div class="ui selection dropdown">
<input name="gender" type="hidden" value="default">
<i class="dropdown icon"></i>
<div class="text">Default Value</div>
<div class="menu">
<div class="item" data-value="default">Default Value</div>
<div class="item" data-value="0">Value</div>
<div class="item" data-value="1">Another Value</div>
</div>
</div>
You can take a look at here https://semantic-ui.com/modules/dropdown.html#/examples. Also you can use 'clearable'.
If you wanna pass this value to back-end, keep in mind that the selected value is in the input.
$('.ui.dropdown').dropdown({
clearable: true
});

Chained or Dependent Select Zend_Form jQuery to remove or replace the form elements?

I have been using Zend Framework 1 to create a dependent/chained Zend_Form.
When a Zend_Form_element_Select another Zend_Form_Element_Select is added to the form with correct fields dependant on the first select's value.
So I add the new Select with a:
$("#city-label").before(data);
which will insert the new select before the city label.
The problem arises when the first select's value is changed again. Then a new Select is added to the form. I would Ideally like the old satellite element that is the label and the select to be removed.
<dt id="satellite-label">
<label for="satellite" class="optional">Satelite</label>
</dt>
<dd class="ui-select">
<select name="satellite" id="satellite">
<option value="--Select One--" label="--Select One--">--Select One--</option>
<option value="5" label="Alex">Alex</option>
<option value="6" label="Patro">patro</option>
<option value="7" label="Zozo ">Zozo</option>
</select></dd>
<dt id="city-label"><label for="city" class="optional">City</label></dt>
And then replaced with the new element.
Try this from within your AJAX success:
$("#satellite-label").remove();
$("#satellite").parent().remove();
You should keep track of the new element so you can remove it when the value changes again:
var currentLabel;
...
if (currentLabel) {
currentLabel.remove();
}
currentLabel = $(data);
$("#city-label").before(currentLabel);
try this ...
$("#satellite_elem-label").remove();
$("#satellite_elem").parent().remove();;
$("#city-label").before(newElement);
You can use a hidden input (Zend_Form_Element_Hidden) then simply replace the hidden element.
$("#target-element").html(data);
Don't forget to use same id (target-element) on html content of data.
This way you can also add backend validators to this hidden element to use isValid method.
You must remove previous inserted select before insert another on first select's value is changed again.
So it may be help in your case.
$("#city-label").prev('.ui-select').remove();
$("#city-label").prev('#satellite-label').remove();
$("#city-label").before(data);
or simply add this
$("#city-label").prev().remove();
$("#city-label").prev().remove();
$("#city-label").before(data);
It will remove select then label and insert new select before insert new one.

Display content based on Select Menu dropdown change

I'm currently using the following to display an input field when I change a dropdown menu selection:
<select id="delivery_country" name="d_country" onchange="
if (this.selectedIndex==14){
this.form['statesUSA'].style.visibility='visible'
}else {
this.form['statesUSA'].style.visibility='hidden'
};">
However, this only changes the input form element called "statesUSA".
If I want to show the div that this form element is inside, how do I do this?
For the record, my HTML reads:
<div id="usa">
<input type="text" id="statesUSA" />
</div>
Many thanks for any pointers.
use document.getElementById(id)
this:
<select id="delivery_country" name="d_country" onchange="if (this.selectedIndex==14){document.getElementById('usa').style.visibility='visible'}else {document.getElementById('usa').style.visibility='hidden'};">

Categories

Resources