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.
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
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.
In the form I have a drop down list with multiple choice, as shown below. Elements are loaded from the database.
<label>Items</label>
<select class="form-control m-b"
ng-model="model.livingComplexId"
x-ng-change="updateOne(model.livingComplexId)">
<option></option>
<option ng-repeat="itemOne in itemsForAddrLevelOne"
value="{{itemOne.id}}">{{itemOne.tobName}}</option>
</select>
I make choose.
For example, I choose an item2.
Then save data. Then, I open the form to edit and I want to see an item that I chose, but the list is empty...
How can I set the previously selected value?
I would recommend to use the ngOptions directive to generate the select menu options:
<select ng-model="model.livingComplexId" ng-options="itemOne.id as itemOne.tobName for itemOne in itemsForAddrLevelOne"></select>
Maybe you could additionally change the ng-model value to model and use ng-options="itemOne as ..." (without the .id) and add an track by itemOne.id.
<select ng-model="yourModel" ng-options="itemOne.tobName for itemOne in itemsForAddrLevelOne"></select>
In the js you should set $scope.yourModel = itemsForAddrLevelOne[0];
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/