I wanted to default the first value of a json array object to a drop down list
<select ng-model="selectedItem" ng-options="item as item.taskName for item in abc.taskList" ng-init="selectedItem = selectedItem || abc.taskList[0].taskName">
<pre>{{selectedItem | json}}</pre>
</select>
I have tried ng-init and setDefault, but nothing worked. Every time a blank option values comes first then comes the taskList values.
this is how my array looks like
$rootScope.abc = {
taskList: [{
'projectId': '',
'taskId': '',
'taskName': ''
}]
};
Here is the json array Object
{
"returnCode": "0",
"returnMsg": "Success",
"taskList": [{
"taskId": "123",
"taskName": "TimeSheet"
}, {
"taskId": "345",
"taskName": "Travel Expense"
},{
"taskId": "653",
"taskName": "Attendance"
}]
}]
}
How do I default TimeSheet as the default value in the dropdown list?
Option 1
Set: ng-options="item.taskName as item.taskName for item in abc.taskList"
<select ng-model="selectedItem"
ng-options="item.taskName as item.taskName for item in abc.taskList"
ng-init="selectedItem = selectedItem || abc.taskList[0].taskName" >
</select>
Demo 1
In ng-init you use abc.taskList[0].taskName a.e. taskName therefore to make it work we need ot use model as item.taskName as item.taskName
Option 2
Set selectedItem as abc.taskList[0]
<select ng-model="selectedItem"
ng-options="item as item.taskName for item in abc.taskList"
ng-init="selectedItem = abc.taskList[0]">
</select>
Demo 2
Using this ng-selected="$first" you will get first value as selected in dropdown.
Set first value Your scope List in controller Like that
$scope._yourscope.projectId= ($scope.taskList.length > 0) ? $scope.taskList[0].projectId: '';
Related
When I try to display my value the select box is always empty. The value is a integer 0 1 2 3 . In this case it should show 0, but the box is empty. What am I doing wrong?
vmDialog.dataModel.requestType value is equal to a 0 integer, but not displaying.
<select class="form-control " name="requestType" ng-model="vmDialog.dataModel.requestType">
<option value=0>0</option>
<option value="{{0}}">0</option>
<option value="0">0</option>
</select>
Firstly there is a simple HTML issue, you need to ensure that each option has a unique value, so far you have used the value 0 for all the options, so when the requestType has a value of 0, the UI cannot pick which of the items should be selected.
If the value supposed to be one of 0,1,2,3 then you need to make sure that there is an option with a corresponding value that can be selected.
What you probably want to do is bind the options to an array that is in the view model:
// on vmDialog
var requestTypeOptions = [
{ name = 'Zero', value = 0 },
{ name = 'One', value = 1 },
{ name = 'Two', value = 2 },
{ name = 'Three', value = 3 },
];
Then in the view: (using ng-options)
<select class="form-control"
name="requestType"
ng-model="vmDialog.dataModel.requestType"
ng-options="o.value as o.name for o in vmDialog.requestTypeOptions track by o.value | orderby: 'value'"
class="form-control input-sm">
</select>
A good write-up for ng-options here: https://stackoverflow.com/a/30507651/1690217
You could also use ng-repeat if you need to customise the template:
<select class="form-control " name="requestType" ng-model="vmDialog.dataModel.requestType">
<md-option ng-value="o.value" ng-repeat="oin vmDialog.requestTypeOptions | orderBy: 'value'">{{o.name}}</md-option>
</select>
<select id="e1" style="width:100%" ui-select2 tabindex="-1" ng-init="GetAllAgent()" ng-model="Agent" ng-options="ctr as ctr.AgentName for ctr in ListAgent track by ctr.AgentId" ng-change="GetSubAgentList(Agent.AgentId)">
<option value=""> </option></select>
when it is in edit mode,could not set the default value using the below code
angular.forEach($scope.ListAgent, function (value, index) {
if (value.AgentId == HR.AgentId) {
$scope.Agent = $scope.ListAgent[index];
}
})
$scope.ListAgent= [{ AgentId: "0", AgentName:"Ann" }, { AgentId: "1", AgentName:"Muh" }];
and
HR.AgentId=1
First off, ui-select2 does not support ng-options: https://github.com/angular-ui/ui-select2/issues/252
Further, ui-select2 does not work with ng-repeat: https://github.com/angular-ui/ui-select2/issues/162
The solution is to use input:
<input ui-select2="select2Options" ng-model="Agent"/>
where select2Options is:
$scope.select2Options = {
data:$scope.ListAgent
}
The list should have structure: [{id,text}] so $scope.ListAgent will be
$scope.ListAgent= [{ id:0, text:"Ann" }, { id:1, text:"Muh" }];
Demo Plunker
For place holder add data-placeholder="----"
Here is my data
This.dynamicCmb = [{
id: 1,
label: 'aLabel',
subItem: ['aSubItem1','aSubItem2','aSubItem3']
}, {
id: 2,
label: 'bLabel',
subItem: [ 'bSubItem' ]
}];
I want to display 'subItem' data depending on the value I give i.e, either id or label. if I search any one it should display value.
<input type="text" ng-model="vm.selectedColumn" /> //Textbox to take either id or name value
<input type="button" value="Get" ng-click="GetCmbValue()" /> //On click of button it should load dropdown
<select ng-options="item.name for item in vm.selectedColumn.subItem" ng-model="vm.selected"></select>
.js file
This.GetCmbValue = function () {
// I should load drop down value here
};
for eg: if I give '1' in textbox then subItem of '1' should display. If I give 'alabel' in textbox then also subItem of 'alabel' should display. It should search either on id or label whatever I give. Please help me to do this
You can attach filter to your ngOption. So that every time you type value in textbox, it will filter data accordingly.
We bind the output of textbox to the filter.
.js file
app.filter('itemFilter', function() {
return function(input,val) {
var out = new Array();
angular.forEach(input, function(item) {
if (item.id == val || item.label == val) {
out = out.concat(item.subItem);
}
});
return out;
};
});
HTML File
<input type="text" data-ng-model="val">
<select data-ng-options="item for item in dynamicCmb | itemFilter : val" data-ng-model="selected"></select>
change your select code by this
<select ng-options="item.name for item in vm.selectedColumn.subItem|filter:{Id:vm.selectedColumn}" ng-model="vm.selected"></select>
I have a drop downlist containing 3 items like below:
100
200
300
It's very easy to be done using AngularJS.
HTML:
<select ng-model="selectedNumber"
ng-options="opt as opt.label for opt in myNumbers">
Controller:
$scope.myNumbers= [
{ label: '100', value: 100 },
{ label: '200', value: 200 },
{ label: '300', value: 300 }
];
$scope.selectedNumber = $scope.myNumbers[0];
Now a new requirement is to add a special option in the drop downlist,
Add New Value ...
100
200
300
When 'Add New Value ...' is selected a new dialog should show to allow user to add a new value in the drop downlist.
How can I implement such drop downlist?
why don't you create options yourself like this:
<select ng-model="selectedNumber">
<option>Add New Value</option>
<option ng-repeat="opt in myNumbers">{{opt.label}}</option>
</select>
or alternatively create a function that returns your array with extra element for example:
$scope.selectNumbers = function() {
return [{ label: 'Add New Value', value: -1 }].concat($scope.myNumbers.concat_;
}
and bind it to select like this
<select ng-model="selectedNumber"
ng-options="opt as opt.label for opt in selectNumbers()">
I am using this code in my controller:
$scope.$watch('option.selectedPageType', function () {
if ($scope.isNumber($scope.option.selectedPageType)) {
localStorageService.add('selectedPageType', $scope.option.selectedPageType);
}
})
getPageTypes: function ($scope) {
$scope.option.pageTypes = [
{ id: 0, type: 'Edit Basic' },
{ id: 1, type: 'Edit Standard' },
{ id: 2, type: 'Report' }
];
$scope.option.selectedPageType = parseInt(localStorageService.get('selectedPageType'));
},
and in my HTML:
<select data-ng-model="option.selectedPageType"
data-ng-options="item.id as item.type for item in option.pageTypes">
<option style="display: none" value="">Select Page Type</option>
</select>
Instead of using the "Select Page Type" option. How can I make it so my code defaults to the value in local storage or if there is nothing there then to one of the values I have in my option.pageTypes list ?
Have your localStorageService return null if there is nothing stored. If it does exist, have the service return the integer
Then in controller:
/* assume want first item in array */
$scope.option.selectedPageType = localStorageService.get('selectedPageType') || $scope.option.pageTypes[0].id
Try using ng-init on the <select ...>:
<select data-ng-model="option.selectedPageType"
data-ng-options="item.id as item.type for item in option.pageTypes"
data-ng-init="option.selectedPageType=DEFAULT_VALUE">
See this fiddle: http://jsfiddle.net/CaeUs/5/