I tried below code to set the dropdownlist value to some integer value.
My code is as below:
<select class='form-control input-new' id="ConditionTypeSelect" data-msg-required="" name="conditionTypeName" data-ng-model="listingProfile.conditionTypeId" data-ng-options="ct.conditionTypeId as ct.conditionType for ct in amazonCategoryConditionType">
<option value=""></option>
</select>
data-ng-model="listingProfile.conditionTypeId" contains integer values.
Can you please let me know how this can be achieved ?
The value for ng-model should be the currently selected value.
<select data-ng-model="currentvalue" data-ng-options="x.value as x.name for x in listofvalues">
</select>
For this code, define $scope.currentvalue to be a singular object and $scope.listofvalues to be the list of objects to choose from. Setting $scope.currentvalue to the value or the index will not work!
For this code, the object should have an attribute value and an attribute name.
Related
I wanted to pass array value in dropdown(select) value but it always shows array key in dropdown value.
I am trying code given below
$databases = array(
'db1','db2','db3','db4','db5',
);
Angular Code
<select ng-model="databases" ng-change="showTables($index)" ng-options="key as value for (key,value) in databases" >
<option value="">-- choose Database --</option>
ng-options is build like this :
ng-options="key as value for (key,value) in databases"
After the in, you have your list. Between for and in, it's the object that you will use for a single select.
Then you have 2 other attributes. Here it's key and value. Value is what you want to print in your list, what is visible for the user. Key is the data which will be put in your DOM as "value".
Here is you want to set your array attribute in your value. Because here you have a simple data, and you don't need any difference between what is visible in your list, and what is in your DOM value, you can do this :
ng-options="value for value in databases"
Moreover, I also notice that you use your variable databases on your ng-model. That's not a good idea, this will erase your list when you will select a value. You have to use an other var.
If the array contains only Strings, you can simply use ng-repeat:
Html:
<div ng-controller="DatabaseSelectExampleController as vm">
<select ng-model="vm.selectedDatabase">
<option ng-repeat="actDatabase in vm.databases" value="{{actDatabase}}">
{{actDatabase}}
</option>
</select>
</div>
JS:
angular.module('yourApp')
.controller('DatabaseSelectExampleController', function(){
this.databases = ['database one', 'someother db', 'a db aswell'];
this.selectedDatabase = this.databases[0];
});
I have a <select> element populated with the acceptable values via ng-options and bound to a model with ng-model. It is possible that the model is set to a value that is not acceptable. (It used to be acceptable but no longer is.) In this case AngularJS renders the <select> as if it had an empty item selected.
Is there a way to have it render the selected value even if it is not listed in ng-options? I know I can put a default <option> inside the <select>. It's better than displaying an empty item, but it's a static string. I'd like to have the invalid value displayed.
Interesting problem. I think that you will be able to achieve this with the combination of ngInit directive to set up initial value (it can be missing from the allowed options list) and ngShow to hide it once valid option is selected.
Something like this:
<select
ng-init="preselected = selected"
ng-change="preselected = null"
ng-model="selected"
ng-options="item.id as item.name for item in items">
<option value="" ng-show="preselected">{{preselected}}</option>
</select>
Demo: http://plnkr.co/edit/lUTR0pHDPecU0OUUwjzt?p=preview
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 am not getting how the ng-model are connected to the ng-repeat options. How can the code below be converted to an ng-repeat? I can get the ng-repeat work but
ng-selected="{{alternative.code == question.answer}}"
is what I don't understand how to do with the ng-options.
<select ng-model="question.answer">
<option ng-selected="{{alternative.code == question.answer}}"
ng-repeat="alternative in question.alternatives"
value="{{alternative.code}}">{{alternative.label}}</option>
</select>
Use the following:
<select ng-model="question.answer"
ng-options="alternative.code as alternative.label for alternative in question.alternatives">
</select>
if question.alternatives is an array and the following:
<select ng-model="question.answer"
ng-options="alternative.code as alternative.label for (key, alternative) in question.alternatives">
</select>
if it is an object. Both expressions start with the syntax value as label, which tells the <select> what to consider a value (to be bound to model) and what to use as a label (visible for users). The whole business with "this option has that value and is selected when model has it too" is then done automatically. See documentation.
<select ng-model="question.answer" ng-options="alt.code for alt in question.alternatives"></select>
modelValue as optionLabelValue for item in array if 'modelValue as' is ommited modelValue is considered as item object
The select list below is display empty row instead of the default value "--Weight--" when product.weightUnitMeasureCode is null.
<select ng-model="product.weightUnitMeasureCode">
<option value="">-- Weight --</option>
<option ng-repeat="unitMeasure in unitMeasures |filter:unitMeasure.isSize='false'" value="{{unitMeasure.unitMeasureCode}}">{{unitMeasure.name}}</option>
</select>
Is there a way to make the list display the default option when product.weightUnitMeasureCode is null? I've tried changing the value of the default option to the following but it didn't work.
value="null"
value=null
Looks like you are in wrong direction as far as angular version of select has been concerned.
Try:-
<select ng-model="product.weightUnitMeasureCode"
ng-options="unitMeasure.code as unitMeasure.name for unitMeasure in unitMeasures | filter:unitMeasure.isSize==false">
<option value="">-- Weight --</option>
</select>
I am not sure if you have a field called code in your data model, but you can adjust based on your model.
if you want to filter out ones with unitMeasure.isSize on a static list then you should just filter them at the controller itself and bind only the required list.