I just have a static select list with 2 options so I didn't use the ng-options parameter. This works only if the user does something to the dropdown. If they leave the value as-is, the dataItem comes through as undefined.
<select ng-model="dataItem.Options">
<option value="1" ng-selected="selected">1</option>
<option value="2">2</option>
</select>
How can I just use the default value, or why isn't my unchanged dropdown passing a value back to my controller? I've also tried to use ng-init="1" in the select tag, but that doesn't seemt to work either.
You'll need to set dataItem.Options to the value you want to select
$scope.dataItem = {Options: '1'};
Note that the value is a string, '1', and not the number 1. THen you can remove the ng-selected.
Related
<div class="filter-box">
<select ng-model="$ctrl.customModel"
ng-options= 'option.id as option.name for option in transactionstatusList'
ng-change="transactionStatusChange()">
<option value="" selected="selected">No Search</option>
</select>
</div>
I am using angularjs ng-options to show data in select box but in option i have one hard-coded value is No-search how to show that value select at first because when data comes dynamically it shows first value from the data
Your code should work well if you have undefined customModel.
$scope.customModel;
Demo 1
However, if $scope.customModel is predefined, after async call, selected option jumps regards to ng-model
Demo 2
When I use select option, the first option of ng-option shows always blank till I select the value.
I have tried option also:
<select class="form-control" ng-model="userDetails.selectedtimezone">
<option ng-repeat="selecttimezonelist in timezones" ng-selected="userDetails.selectedtimezone == selecttimezonelist.id" value="{{selecttimezonelist.id}}">{{selecttimezonelist.timezone}}</option>
</select>
By angular way
<select class="form-control" ng-model="userDetails.selectedtimezone" ng-init="selecttimezonelist = timezones[0]">
<option ng-repeat="selecttimezonelist in timezones" ng-selected="userDetails.selectedtimezone == selecttimezonelist.id" value="{{selecttimezonelist.id}}">{{selecttimezonelist.timezone}}</option>
</select>
And then use css
select option:empty {
display:none
}
Angular will usually auto fill in the first option of a drop down menu with a blank value if it hasn't been initialized to a value or if you have set it to a value that is not within the list of values it can select from.
You should take a look at what value you are initializing its variable to or, if you haven't yet, initialize the variable to one of the values in the list to select from.
I am trying to retrieve a value that was stored in my MySQL database and display the selected value from the database along with the other select box items so that they can be updated. The problem that I am having is that the select box is not displaying the selected value that is stored in the database, instead it defaults to the empty first option. I am using angularjs to retrieve the values from laravel:
laravel
public function getEmployeeshifts() {
$employeeShift = DB::table('shift')
->select('shiftId', 'title')
->get();
return Response::json($employeeShift);
}
angularjs
$http.get('/schedule/employeeshifts').success(function(shiftdata) {
$scope.employeeshifts = shiftdata;
});
html
<select class="form-control input-sm" name="employeeshift"
ng-model="time.employeeshift"
ng-init="time.employeeshift='{{$schedules[0]->title}}'"
ng-options="employeeshift.title for employeeshift in employeeshifts track by employeeshift.shiftId" required>
<option value="">Select</option>
</select>
desired output
<option value="101">Shift A</option>
<option value="102">Shift B</option>
<option value="103">Shift C</option>
Based on the above desired output what i actually want to store in the database is the value but I need to show the words to the user. I am not sure what I am doing wrong, therefore I am asking for assistance to this problem.
AngularJS automatically resolves which item is selected based on the value of ng-model. It appears that you are setting the value of time.employeeshift to a title value and not a shiftId value. Try changing your ng-init attribute to time.employeeshift='{{$schedules[0]->id}}' or it's equivalent.
You have to set your model to the desired selected item. In your case, you are not setting it correctly in your ng-init. You should use employeeshift as your model.
<select ng-model="employeeshift"
ng-init="employeeshift = employeeshifts[0]"
ng-options="employeeshift.title for employeeshift in employeeshifts">
<option value="">Select</option>
</select>
This will bind the selected shift object to the $scope.employeeshift variable, and set the default value to the first object in your employeeshifts array.
I use AngularJS and bind a <select> to my model:
<select ng-model="model.something" ng-options="..." >
<option></option>
</select>
It leaves one empty element on top of dropdown, and then generates other options from my view-model.
These things work great:
1. I choose option from dropdown, it is bound to model.something.
2. I choose empty option, model.something is set to null.
3. I set model.something in another function, the correct option is selected.
What does not work:
- I set model.someting to null in another function, empty option is not selected, the previous value is still selected.
How to "tell" Angular to select empty option, if I bind model to null value?
Change <option></option> to <option value=""></option> and set model.someting to empty string "".
UPDATE
Here is a working JSFiddle:
http://jsfiddle.net/DianaNassar/6kLW6/
I have an enum (I code using TypeScript):
export enum AddressType
{
NotSet = 0,
Home = 1,
Work = 2,
Headquarters = 3,
Custom = -1,
}
Then in my controller I have a field named type, into which I set the initial value that should be selected in the select input (I set it to AddressType.Headquarters).
Finally, in my HTML I put the following:
<select ng-model="Ctrl.type" ng-options="addressType for addressType in Ctrl.getAddressTypes()"></select>
Everything seems to work fine except one thing: for some reason Angular does not select "3" (Headquarters) initially in the select after all bindings have been updated. Angular creates an extra option like this instead:
<option value="?" selected="selected"></option>
So for some reason Angular cannot figure the initial option to select in the combo.
If the user selects another option of the combo box, Ctrl.type is updated properly so the binding works fine for that part. Basically my problem is just that the option that should be selected initially is not selected as expected.
What am I missing here that is causing that problem?
Found the problem:
The array returned by Ctrl.getAddressTypes() was an array of strings:
["0", "1", "2", "3", "1"]
and what was stored in Ctrl.type was of type number.
AngularJS compares the array supplied to ng-options to the value supplied to ng-model using the '===' operator. 3 does not equal to "3" in that case - that's why it did not work.
I often run into this when using number id's. My way around this quirk is to add ''+ to convert it to string type:
<select ng-options="''+u.id as u.name for u in users"
In a function if the below code is added and the same is called from the ng-init then the issue is also getting resolved. This will resolve the string comparison issue.
$scope.Ctrl.type = "" + $scope.Ctrl.type + "";
I happens because you didn't initiated selected value. Try to set init value with ng-init:
<select ng-model="Ctrl.type"
ng-options="addressType for addressType in Ctrl.getAddressTypes()"
ng-init="Ctrl.type = ..."
></select>
See this Demo Fiddle where we have 2 combos with and without init value. You can see that one combo HTML seems like:
<select ng-model="selectedItem1"
ng-options="selectedItem1.name as selectedItem1.name for selectedItem1 in values" class="ng-pristine ng-valid">
<option value="?" selected="selected"></option>
<option value="0">General</option>
<option value="1">Super</option>
<option value="2">Trial</option>
</select>
The proper one:
<select ng-model="selectedItem"
ng-options="selectedItem.name as selectedItem.name for selectedItem in values"
ng-init="selectedItem = values[1].name" class="ng-pristine ng-valid">
<option value="0">General</option>
<option value="1" selected="selected">Super</option>
<option value="2">Trial</option>
</select>