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>
Related
I want user to select a state just from this list :
<input list="states">
<datalist id="states">
<option value="Pendiente">Pendiente</option>
<option value="Frenada">Frenada</option>
<option value="Finalizada">Finalizada</option>
</datalist>
but also I don't want to use <select>, i know that but I want to keep the ability to type (and search among the options) but at last, one of the options must be selected.
please help me with this. I want to use it in react
You can set the value attribute of the input with the option value you want to be selected:
<input list="states" value="Pendiente">
<datalist id="states">
<option value="Pendiente">Pendiente</option>
<option value="Frenada">Frenada</option>
<option value="Finalizada">Finalizada</option>
</datalist>
I am using a select list in a particular edit form page. Whenever a particular entry has to be edited, a new state with the edit form appears. It has a select list which has to populated with one of its options (ideally the value that is fetched from the server using API has to be populated into the select).
I am using Angular JS on the client side. Could somebody please tell me how to achieve the same thing using Angular JS?
I need that initial value inserted by the user in the select to be shown up as a default when the edit page is opened.
(MOREOVER, MY PLACEHOLDER NOT WORKING:"Choose a country")
Lets say there is something like this:
<div class="col-md-8">
<select data-placeholder="Choose a Country..." class="chosen-select form-control" style="width:350px;" tabindex="2" required="" ng-model="location">
<option value="" disabled selected>Select</option>
<option ng-repeat="location in locations1" value="{{location.id}}">{{location.name}}</option>
</select>
</div>
Use ngOptions.
<select ng-options="location as location.name for location in locations track by location.id" ng-model="selected"></select>
With ng-options you can do it like this:
<div class="col-md-8">
<select ng-model="selectedLocation" ng-options="location.id as location.name for location in locations1" class="chosen-select form-control" style="width:350px;" tabindex="2">
<option value="" disabled selected>Choose a Country</option>
</select>
</div>
The location.id is set to the options value and the location.name is set to the text.
To use a placeholder in a select is kind of what the default options does for you. So I would set the default option text to "Choose a country". Se this SO answer on that topic
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>
In Angularjs, binding input select to the model creates new empty option
<option value="? undefined:undefined ?"></option>
And this is the code
<select name="category" ng-model="hotspot.category">
<option>Culture</option>
<option>Education</option>
<option>Parks</option>
<option>Student Pubs</option>
</select>
Is this normal? It doesn't seem to be something good looking.
Make sure you have initialized your model variable with one of the option value.
Try this
Controller
$scope.hotspot = {};
$scope.hotspot.category = "Culture";
HTML
<select name="category" ng-model="hotspot.category">
<option>Culture</option>
<option>Education</option>
<option>Parks</option>
<option>Student Pubs</option>
</select>
I have searched everywhere and it is hard to tell what i'm doing wrong. I'm trying to populate a select component with values from a controller
My snippet from my controller
$scope.sTypes=
[
{name:'PGD',id:1},
{name:'MSC',id:2},
{name:'PHD',id:3},
{name:'DBA',id:4}
]
$scope.selectedType={};
My HTML select
<select ng-model="selectedType" ng-option="sType.name for sType in sTypes">
<option>--- Select Scholarship ---</option>
</select>
What is being rendered
<select
ng-model="selectedType"
ng-option="sType.name for sType in sTypes"
class="ng-pristine ng-valid">
<option value="? object:005 ?"></option>
<option value="--- Select Scholarship ---">
--- Select Scholarship ---
</option>
</select>
Any help will be much appreciated because this is starting to piss me off.
Haven't seen that exact thing myself, but I've found adding value="" to the null select option to work:
<select ng-model="selectedType" ng-option="sType.name for sType in sTypes">
<option value="">--- Select Scholarship ---</option>
</select>
This will then be the default select option if ng-model is null.
So, I would configure the html like above and then initialize selectedType like this:
$scope.selectedType=null;