How to set default selected dropdown with different values from same source - angularjs

I have an JSON array from where i am creating Dropdown and default selected using ng-model
$scope.repeats = [{
'title': 'Never',
'value': 'Never'
}, {
'title': 'Daily',
'value': 'Daily'
}, {
'title': 'Weekdays (M-F)',
'value': 'Weekdays'
}, {
'title': 'Weekly',
'value': 'Weekly'
}, {
'title': 'Monthly',
'value': 'Monthly'
}, {
'title': 'Yearly',
'value': 'Yearly'
}, {
'title': 'Hourly',
'value': 'Hourly'
}, {
'title': 'Minutely',
'value': 'Minutely'
}];
$scope.def_sele = $scope.repeats[0]
In the view:
<select ng-model="def_sele" ng-options="repeat.title for repeat in repeats"></select>
From the above code the default selected dropdown is Daily. Till here it was all fine.
But i am creating an TODO application where each TODO has different selection(Never, Daily etc.. from above $scope.repeats)
So, how to set default selected for each TODO ????? Because the above example i've given it applies every where and i get Daily selected on each TODO, but i want to select different different for each TODO, how to do that????
Updated
My code is like:
<ul ng-repeat="todo in todos_detail">
<select ng-model="todo.dropdown_position_index" ng-options="repeat.title for repeat in repeats"></select>
</ul>
In the above example for each todo has a different dropdown_position_index, so i want the dropdown is selected = selected using todo.dropdown_position_index.

You need to make sure the value you're selecting in your <select> lines up with the value in your selected todo.
I haven't seen your code, so I put together a working example in jsbin.
The basic idea is this:
<select ng-model="X" ng-options="x.A as x.B for x in Z"></select>
Where:
Z = your collection of options
x = an individual item variable from Z
x.A = the value of the option
x.B = the text of the option
X = the value to update AND read from
as long as the array Z has an object in it x where the property x.A is equal to X, it will be selected.
... or for a less confusing answer, check the code example. ;)
Best of luck

given for the example object structure
$scope.todos = [{
'title': 'Weekly',
'value': 'Weekly'
}, {
'title': 'Yearly',
'value': 'Yearly'
}];
you could do something like this
<div ng-repeat="todo in todos">
<select ng-model="todo.value" ng-options="repeat.value as repeat.title for repeat in repeats"></select>
</div>
here an example plunker

Related

Angular how to have multiple selected

I have this array of objects. that holds somethings like this.
[
{
id: 1,
name: "Extra Cheese"
},
{
id: 2,
name: "No Cheese"
}
]
im iterating thru the array here
<select ng-model="item.modifiers" multiple chosen class="chosen-select" tabindex="4" ng-options="modifier._id as modifier.name for modifier in modifiers"></select>
The thing item.modifiers model that has an array of this 2 id
[
1,2
]
I want the multi select to auto selected the two ids that are in the item.model
I want the final result to look something like this
Your code is pretty much working already, maybe some of the variables are not assigned correctly (eg. id instead of _id)
angular.module('test', []).controller('Test', Test);
function Test($scope) {
$scope.modifiers = [
{
id: 1,
name: "Extra Cheese"
},
{
id: 2,
name: "No Cheese"
}
]
$scope.item = {};
// add this for pre-selecting both options
$scope.item.modifiers = [1,2];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app='test' ng-controller='Test'>
<select ng-model="item.modifiers" multiple chosen class="chosen-select" tabindex="4" ng-options="modifier.id as modifier.name for modifier in modifiers"></select>
</div>
If I understand the question correctly, you're wanting to pre-select the two options.
To do this you will need to set your ng-model to point to the actual objects you are iterating over.
You will also need to change your ng-options to ng-options="modifier as modifier.name for modifier in modifiers" rather than just iterating over the ids.
Here's the relevant documentation under Complex Models (objects or collections)
https://docs.angularjs.org/api/ng/directive/ngOptions
Something like this should work:
HTML:
<select ng-model="$ctrl.item.modifiers"
ng-options="modifier as modifier.name for modifier in $ctrl.modifiers"
multiple chosen class="chosen-select" tabindex="4" >
</select>
JS:
app.controller("my-controller", function() {
var $ctrl = this;
$ctrl.modifiers = [{
id: 1,
name: "Extra Cheese"
}, {
id: 2,
name: "No Cheese"
}];
$ctrl.item = {
modifiers: []
}
$ctrl.$onInit = function() {
const id1 = 1;
const id2 = 2;
for (const modifier of $ctrl.modifiers) {
if (modifier.id === id1 || modifier.id === id2) {
$ctrl.item.modifiers.push(modifier);
}
}
}
}
Here's a pen showing the result:
http://codepen.io/Lahikainen/pen/WooaEx
I hope this helps...

How to filter each row dropdown values in Angular Ui Grid

I started to work with ui-grid a few time ago so i'm having some problems.
I would like to filter the options in dropdown of every row of the grid.
I can filter the values and show it in the dropdown field but when i click in dropdown only appear undefined values. What can i do to solve this problem?
I've tried so many things but i can't find the solution.
Here is the plunker
http://embed.plnkr.co/HMsq4OasNs50ywJuI3DS/
Thanks
I forked your plunker.
In summary, I changed up the column definition to use editDropdownOptionsFunction instead of the combination of editDropdownOptionsArray and cellFilter. According to the documentation,
cellFilter is a filter to apply to the content of each cell
... so that doesn't seem like what you were trying to achieve.
Also, changed the periodos definition for rowEntity.sindicato === 1 to be an array rather than an object.
editDropdownOptionsFunction: function(rowEntity, colDef) {
console.log(rowEntity);
if (rowEntity.sindicato === 1) {
periodos = [{
id: 1,
value: 'teste1'
}];
} else if (rowEntity.sindicato === 2) {
periodos = [{
id: 2,
value: 'test2'
}, {
id: 5,
value: 'test5'
}];
} else {
periodos = [{
id: 3,
value: 'test3'
}, {
id: 6,
value: 'test6'
}, {
id: 4,
value: 'test4'
}];
}
return periodos;
}

AngularJS filter object by property on tree structure

I am posting this because I never found a precise answer for filtering nested objects (tree sturcture).
Let's say we have an JSON tree structure that looks like this:
$scope.tree = [{
id: 1,
parent_id: 0,
name: 'Root Item',
items: [
{
id: 2,
parent_id: 1,
name: '1st Child of 1'
},
{
id: 3,
parent_id: 1,
name: '2nd Child of 1'
},
{
id: 4,
parent_id: 1,
name: '3rd Child of 1',
items:[
{
id:5,
parent_id: 4,
name:'1st Child of 5'
},
{
id:6,
parent_id: 4,
name:'2nd Child of 5'
}
]}
]
}]
How do we traverse the tree with a filter to get object with id 6 for example?
If we use the following filter for example:
<div data-ng-init="selectedItem = (tree | filter:{id:6})">
<h1>The name of item with id:6 is selectedItem.name</h1>
</div>
It will only iterate through the first level in which will only find id:1.
So, in order to get nested level objects we must use a recursive filter like this one:
angular.module("myApp",[])
.filter("filterTree",function(){
return function(items,id){
var filtered = [];
var recursiveFilter = function(items,id){
angular.forEach(items,function(item){
if(item.id === id){
filtered.push(item);
}
if(angular.isArray(item.items) && item.items.length > 0){
recursiveFilter(item.items,id);
}
});
};
recursiveFilter(items,id);
return filtered;
};
});
});
So, to use this filter in the markup you would call it like this:
<div data-ng-init="selectedItem = (tree | filterTree:6)">
<h1>The name of item with id:6 is selectedItem.name</h1>
</div>
Hope you find this useful, it took me some time to digest recursive filters.
Of course, this filter works to get 1 item since it returns [0] first object of filtered array. But if you want it to return more than 1 result you'll have to remove only that [0] at the return function and then use ng-repeat to iterate over filtered resutls.

AngularJS Select and ng-options: Can I bind and object to ng-model while only displaying a property?

I'm binding a select element to data that looks like this:
var gearConditions = [
{ id: 1, value: 'New' },
{ id: 2, value: 'Like New' },
{ id: 3, value: 'Excellent' },
{ id: 4, value: 'Good' },
{ id: 5, value: 'Fair' },
{ id: 6, value: 'Very Used' },
{ id: 7, value: 'Other' }
];
My select looks like this:
<select name="condition"
class="form-control"
ng-model="postModel.condition"
ng-options="condition.id as condition.value for condition in gearConditions">
</select>
This binds condition.id to the ng-model and displays condition.value as the select option. My question is: can I keep the current behavior but bind the whole object to the ng-model?
For example if the first option is selected the model value would then be {id:1, value: 'New'} rather than just 1.
Is this possible or do I need to use ng-changed to accomplish this?
Thanks!
Yes, change condition.id to condition:
ng-options="condition as condition.value for condition in gearConditions"
I think you you try similar:
// I took this from my code
ng-options="key as value for (key, value) in ...
Now you could try to combine key+value and see if it appears like you wish.

How can I make a <select> dropdown in AngularJS default to a value in localstorage?

I have a <select> that I am populating with a list of values. Everything works and I see the expected list. But now I would like to have the value set to a locally stored value if available.
I have the code below. When I run this code the number after the Type in the label changes to match that in the localstorage but the select box does not change.
getContentTypeSelect: function ($scope) {
entityService.getEntities('ContentType')
.then(function (result) {
$scope.option.contentTypes = result;
$scope.option.contentTypesPlus = [{ id: 0, name: '*' }].concat(result);
$scope.option.selectedContentType
= localStorageService.get('selectedContentType');
}, function (result) {
alert("Error: No data returned");
});
},
<span class="label">Type {{ option.selectedContentType }}</span>
<select
data-ng-disabled="!option.selectedSubject"
data-ng-model="option.selectedContentType"
data-ng-options="item.id as item.name for item in option.contentTypesPlus">
<option style="display: none" value="">Select Content Type</option>
</select>
Here is the code I have that sets the value in localstorage:
$scope.$watch('option.selectedContentType', function () {
if ($scope.option.selectedContentType != null) {
localStorageService.add('selectedContentType',
$scope.option.selectedContentType);
$scope.grid.data = null;
$scope.grid.selected = false;
}
});
Here is the data stored in contentTypesPlus:
0: Object
id: 0
name: "*"
__proto__: Object
1: b
id: 1
name: "Page"
__proto__: b
2: b
id: 2
name: "Menu"
__proto__: b
3: b
id: 3
name: "Content Block"
__proto__: b
How can I make the select box go to the localstorage value if there is one?
Update
Still hoping for an answer and I would be happy to accept another if some person can help me. The answer given is not complete and I am still waiting for more information. I am hoping someone can give me an example that fits with my code. Thanks
I think you need to make sure selectedContentType needs to be the id field of the option object according to the comprehension expression defined in the select directive.
The comprehensive expression is defined as
item.id as item.name for item in option.contentTypesPlus
item.id will be the actual value stored in the ng-model option.selectedContentType
Say this is your select with ng-model
<select
ng-model="language.selected"
ng-init="language.selected = settings.language[settings.language.selected.id]"
ng-options="l.label for l in settings.language"
ng-change="updateLanguage(language.selected)">
In your controller
$scope.settings = {
enableEventsNotification: true,
enableiBeaconNotification: true,
hours: [
{ id: 0, label: '3h', value: 3 },
{ id: 1, label: '6h', value: 6 },
{ id: 2, label: '9h', value: 9 },
{ id: 3, label: '12h', value: 12 },
{ id: 4, label: '24h', value: 24 }
],
language: [
{ id: 0, label: 'English', value: 'en-us' },
{ id: 1, label: 'Francais', value: 'fr-fr' }
]
};
$scope.hours = [];
$scope.hours.selected = $localstorage.getObject('hours', $scope.settings.hours[1]);
$scope.settings.hours.selected = $localstorage.getObject('hours', $scope.settings.hours[1]);
$scope.hours.selected = $scope.hours.selected;

Resources