Hu,
another question to angular.
I have an array:
items = [
{"id":1,"name":"AAA"},
{"id":2,"name":"BBB"},
{"id":3,"name":"CCC"},
{"id":4,"name":"DDD"}
]
and my ng-select that is combined with a label by
`{{ itemid }}
<select type="text" class="form-control form-control-small"
ng-model="itemId" ng-options="item.id as item.name for item in items">
</select>
Now, when I select by the first time the first option is an "empty space" that I can not choose. But choosing an option makes the drop down closes. And when I click on my select again the last selected option is hightlighted.And I'd like to have the "empty space" as first option again.
Is it possible?
Ye that's possible by resetting your itemId with a combination of ng-click and ng-change e.g.:
<select type="text" class="form-control form-control-small"
ng-model="itemId" ng-options="item.id as item.name for item in items"
ng-click="reset()" ng-change="update()">
</select>
Use one to track when a change is made and only if a change is made and the element is clicked again reset itemId to 0
See this plnkr for an example: http://embed.plnkr.co/i0J0lCZwgnQ9YRoeKoHS/
You can specify a blank option in your HTML as an 'option' element nested within the select (from angular docs):
<select ng-model="myColor" ng-options="color.name for color in colors">
<option value="">-- choose color --</option>
</select>
Related
I have a <select> that loops over an array of data and displays the selections available in the dropdown list.
the markup is like this:
<select required class="form-control btn-primary btn dropdown-toggle"
ng-options="s.name for s in list track by s.name" ng-model="list">
<option selected value=""></option>
<option value="" ng-click="">Split</option>
</select>
What I want is, to have the preselected value as an empty string, I achieved that with:
<option selected value=""></option>
but then I need a second custom <option> tag besides all the <option> tags that get generated by the ng-option,
in this tag I need to show a string, in this case "split", and there will be a ng-click on this option so the user can click on it and a second dropdown will appear.
The problem is the second <option> tag it's not shown, only the first one, and I did some tests, and apparently I can show only one option tag besides the ones from ng-option.
Is there a solution for this?
What I need as end result is my option list generated by ng-option,
then a preselected option that is EMPTY (it shows when the user loads the page), and a second option with a custom string that will be used like a button.
Here a jsfiddle where you can see that the second custom option tag isnt shown
https://jsfiddle.net/0xyt24sh/10/
thank you
It's impossible to have more than one hard-coded option with ngOptions, as explicitly mentioned in the documentation:
Optionally, a single hard-coded element, with the value set
to an empty string, can be nested into the element. This
element will then represent the null or "not selected" option.
A workaround might be to use ngRepeat:
<select class="form-control btn-primary btn dropdown-toggle" ng-model="selection">
<option value="" selected></option>
<option ng-repeat="s in list">{{s.name}}</option>
<option ng-click="" value="split">Split</option>
</select>
Updated fiddle: https://jsfiddle.net/0xyt24sh/17/
From ngOptions documentation:
Optionally, a single hard-coded element, with the value set to an empty string, can be nested into the element. This element will then represent the null or "not selected" option. See example below for demonstration.
In this case, ngOptions isn't fit for your problem; Instead, you can use <option>s with ng-repeat, as such:
<select required class="form-control btn-primary btn dropdown-toggle" ng-model="selected">
<option selected value=""></option>
<option ng-repeat="item in list track by item.code">
{{item.name}}
</option>
<option value="split" ng-click="doSomething()">Split</option>
</select>
Working JSFiddle here
I have created a dropdown in Angular and used change() event to capture the selected value.
Ex:the dropdown has Age,gender and Nationality. If I select Age,it will display some content and remove the Age option in the dropdown.
This part worked fine. Similarly I do the same for Gender too. Finally I have only Nationality.
I can't able to select the Nationality(last) field. Is there any other event for capturing this value?
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<select class="form-control" name="seg_id" (change)="changeShape($event.target)">
<option disabled hidden [value]="selectUndefinedOptionValue">-- select --</option>
<option *ngFor="let seg of segment" [value]="seg">
{{seg}}
</option>
</select>
I've been dealing with this problem for a long time. I currently have a function called "add ()" that allows me to add items to an array that feeds a dropdown and text fields. Every time I add a new item to the array, I add it empty:
$scope.aAnimals.push({"animal": ""})
This causes a problem with the dropdown, since the value of "animal" is equal to ""
<Option style="display: none" value=""> Select an animal </option>
Then the item is not added. Both "animal" and the dropdown value of the first option are empty strings. If you add a value for "animal", other than "" here it would work and would be added to the dropdown.
What I can do? I want the generated text fields to be empty, and the dropdown adds the item.
<select class="form-control" ng-model='obj.animal' id='animal' name='animal'
ng-options="opt as opt.animal for opt in aAnimals track by opt.animal">
<option style="display:none" value="">Select an animal</option>
</select>
<div ng-repeat='item in aAnimals'>
<input type='text' value={{item.animal}} class='animal' />
</div>
$scope.obj = {}
$scope.aAnimals=[{ "animal": "cat"},{ "animal": "dog"}]
$scope.add=function(){
$scope.aAnimals.push({ "animal": ""})
}
http://plnkr.co/edit/PRDp3a1bDJKtRmGR9GMY?p=preview
Let me verify what you need.
When the user click on the Add button, a new empty text box will be create in the page and a new empty option will be create in the drop down. When the user change the value in the text box, the drop down option will change.
In this case your need to modify the code like this.
<select class="form-control" ng-model='obj.animal' id='animal' name='animal'
ng-options="opt as opt.animal for opt in aAnimals">
<option style="display:none" value="">Select an animal</option>
</select>
<div ng-repeat='item in aAnimals'>
<input type='text' class='animal' ng-model='item.animal' />
</div>
I removed track by opt.animal like Pankas said, and added ng-model='item.animal', also don't need value={{item.animal}} since we use AngularJS 2-way binding.
Your code is working perfectly, just remove display none in option
<option value="">Select an animal</option>
I seen you are using jquery in Save functionality. We have jqlite in built in angular. Please check below code for save.
var length = $scope.aAnimals.length;
$scope.aAnimals[length-1].animal =
angular.element(document).find('.animal').eq(length-1).val();
I have an angularjs dropdownlist using ng-options
<select ng-options="perlocation.name for perlocation in locations" ng-model="locationDropdown">
My dropdown list loads fine but the selected option 0 is empty and i want to replace it with "Please Select One"
<option value="?" selected="selected"></option>
How do i do this? All the examples i have seen online doesnt seem to work.
Thanks
In the angular documentation for select it states
Optionally, a single hard-coded element, with the value set
to an empty string, can be nested into the element. This
element will then represent the null or "not selected" option. See
example below for demonstration.
Which means you can do this:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-init="arr=[1,2,3]">
<select ng-model="val" ng-options="x for x in arr">
<option value="">Please select an option</option>
</select>
<br>
Val: {{val}}
</div>
</div>
Initialize $scope.locationDropdown = 'Please Select One' as default
or
<select ng-options="perlocation.name for perlocation in locations" ng-model="locationDropdown">
<option> Please Select One </option>
</select>
I'm new to AngularJS, so I apologize if this question is naive.
We have cascading selects that populate as you select values. When the value of Select A changes, the values in Select B also change since they filter based on the value in Select A.
So here is the scenario:
Choose option from Select A
Choose option from Select B
Change selection for Select A
Observe that options in Select B update accordingly.
Observe that bound model for Select B does not update accordingly.
This seems so basic that we are really scratching our heads. What is the point of two-way data binding if this scenario isn't covered?
Here is my view:
<body ng-controller="MainCtrl">
Make:
<select ng-model="makeng" ng-options="option.value as option.display for option in makes">
<option ng-disabled="true" ng-selected="true" value="">Select a make</option>
</select>
<br />
{{makeng}}
<br /> <br />
Model:
<select ng-model="modelng" ng-options="option.display for option in models | filter:{make:makeng}">
<option ng-disabled="true" ng-selected="true" value="">Select a model</option>
</select>
{{modelng}}
</body>
Here's a Plunkr, demonstrating:
http://plnkr.co/edit/9XrKgW?p=preview
P.S. The above example is purely fictional and forked from another plunkr. Just the easiest way to demonstrate what we are seeing.
This is how it is supposed to work. The select control changes the model in response to a user's selection, but if you change the set of allowed values from underneath it (i.e. by filtering out) it keeps the model intact.
The way to make this work is by invalidating the model in response to a change in Select A:
Make:
<select ng-model="makeng"
ng-options="option.value as option.display for option in makes"
ng-change="modelng = undefined">
<option value="">Select a make</option>
</select>
<br />
Model:
<select ng-model="modelng"
ng-options="option.display for option in models | filter:{make:makeng}">
<option value="">Select a model</option>
</select>