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];
});
Related
Below is my select with ng-options:
<select ng-options="key as value for (key , value) in getList() ..."> </select>
The getList() function retrieves the following object:
{"CURRENT_ACCOUNT":"test1","ORDINARY_ACCOUNT":"test2"}
and if I inspect the generated options, it is the following:
<option label="test1" value="string:CURRENT_ACCOUNT" selected="selected">test1</option>
As you can see, everything seems right except the value attribute has a string: prefix.
How can I remove the prefix? What did I do wrong?
You didn't do anything wrong and your code is actually correct. This is how AngularJS creates the options.
<select ng-model="selected" ng-options="key as value for (key, value) in getList()"></select>
Selected: {{selected}}
If you print out the value of the selected item immediately following it, you'll noticed that the value is just CURRENT_ACCOUNT and not string:CURRENT_ACCOUNT as the option leads you to believe.
Here is a plunker demonstrating it.
https://next.plnkr.co/edit/lvEi6pknJZMh0wab?open=lib%2Fscript.js&deferRun=1
I'm working on angularjs app, and I can't find the answer for simple question. I've got an select with ng-options, when array that is set for options has more then one object inside the select is empty on start, but when array has only one element it automatically set it as default value. I need this select to be empty at the begining all the time, is there any solution?
in angularJS you may separate the variable used to fill in your options values and the model that stores your selected value.
See that example :
//Model used to store selected values
<select class="form-control" ng-model="myModel.country">
//I have a $scope.countries array of country
<option ng-repeat="country in countries" ng-value="country" required>{{country.name}}</option>
</select>
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 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.
In my angular application , I have created one dropdown containing sim name. Those names are coming from API. I also set default value as All sim. But it is not working. Here is my code snippet.
<select ng-model="selectSim" class="selectpicker" ng-options=" item.description for item in simList">
<option value="all">Select All</option>
When I I render this page , I can see dropdown containing Sim name but my "select all" option is missing.
I cant figure it out whats wrong in my code.
Set option value = ""
<select ng-model="selectSim" class="selectpicker" ng-options=" item.description for item in simList">
<option value="">Select All</option>
</select>
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.
try this
This is html code (don't need option tag )
<select ng-model="selectSim" class="selectpicker" ng-options=" item.description for item in simList">
and write this way in your controller code where assign values to simList
$scope.simList.push({ description : "Select All", Id: 0 }); // this line helps to dynamoically add defualt value in `$scope.simList` array, now the default item added in bottom side
$scope.selectSim= $scope.simList[$scope.simList.length - 1];// this is helps to assign default item `selectSim` model
'*' here Id: 0 is your value name and dummy values. you need to change value name