I want do a dependen select / dropdown.
I obtain this json sample:
[
{
"id": 15695,
"username": "user1",
"address": {
"id": 16794,
"location": "O Treviño de San Pedro"
},
"jobs": [
{
"id": 7562,
"name": "ut"
},
{
"id": 7565,
"name": "temporibus"
},
{
"id": 7603,
"name": "perspiciatis"
},
{
"id": 7622,
"name": "optio"
}
]
}
]
This is the angular code:
<select ng-model="industrialist.user" ng-options="user.id as user.username for user in users"></select>
<select ng-model="industrialist.job" ng-options="job.id as job.name for job in industrialist.user.jobs"></select>
If I do this code, then dependent select works but then i haven't de correct key in industrialist.user.
<select ng-model="industrialist.user" ng-options="user.username for user in users"></select>
What can I do?
Thanks
I believe what you need to do is save the whole user rather than the just the id. You can get the id out later if you need it.
<select ng-model="industrialist.user" ng-options="user.id as user.username for user in users"></select>
<select ng-model="industrialist.job" ng-options="job.id as job.name for job in industrialist.user.jobs"></select>
Here is a working fiddle. JSFiddle
Related
I don' have a lot of knowledge about AngularJS. I have a JSON with all the data and first I created a select and according to the selected option I show some data or others according to the value, which are the IDs in the json
JSON
$scope.players = [
{
"player": {
"info": {
"position": "D",
"shirtNum": 4,
"positionInfo": "Centre/Right Central Defender"
},
"nationalTeam": {
"isoCode": "BE",
"country": "Belgium",
"demonym": "Belgian"
},
"age": "27 years 139 days",
"name": {
"first": "Toby",
"last": "Alderweireld"
},
"id": 4916,
"currentTeam": {
"name": "Tottenham Hotspur",
"teamType": "FIRST",
"shortName": "Spurs",
"id": 21
}
},
"stats": [
{
"name": "goals",
"value": 5
},
{
"name": "losses",
"value": 20
},
{
"name": "wins",
"value": 48
},
{
"name": "draws",
"value": 23
},
{
"name": "fwd_pass",
"value": 1533
},
{
"name": "goal_assist",
"value": 2
},
{
"name": "appearances",
"value": 80
},
{
"name": "mins_played",
"value": 6953
},
{
"name": "backward_pass",
"value": 308
}
]
},
...];
HTML
<select id="select-players" ng-model="Jugador" ng-options="jugador as (jugador.player.name.first + ' ' + jugador.player.name.last) for jugador in players track by jugador.player.id " ng-change="show()">
<option value="">Select a player...</option>
</select>
And I want to show the details of the player
<div class="content-player">
<div class="img-team"><span class="img-escudo"><img src="img/tottenham.png" /></span></div>
<p class="name-player">{{jugador.player.name.first}} {{jugador.player.name.last}} <span class="pos-player">{{jugador.info.positionInfo}}</span></p>
<div class="cont-desc-player">
<div class="desc-player">
<span class="txt-estadistics">{{jugador.stats.name}}</span>
<span class="num-estadistics">{{jugador.stats.value}}</span>
</div>
<div class="desc-player separador">
<span class="txt-estadistics">{{jugador.info.positionInfo}}</span>
<span class="num-estadistics">{{jugador.stats.value}}</span>
</div>
<div class="desc-player separador">
<span class="txt-estadistics">{{jugador.info.positionInfo}}</span>
<span class="num-estadistics">{{jugador.stats.value}}</span>
</div>
<div class="desc-player separador">
<span class="txt-estadistics">{{jugador.info.positionInfo}}</span>
<span class="num-estadistics">{{jugador.stats.value}}</span>
</div>
<div class="desc-player separador">
<span class="txt-estadistics">{{jugador.info.positionInfo}}</span>
<span class="num-estadistics">{{jugador.stats.value}}</span>
</div>
</div>
</div>
I don't know if I need to create in the controller one switch or using only if and else if is good and how can call it in HTML to show the details.
Thanks
You are using the iterated current object jugador in place of using the Model name Jugador. Try using Jugador.player.name.first instead of jugador.player.name.first and it should work fine if rest of the things are ok.
I also don't see the need of ng-change="show()" in your case. Model changes automatically as you change the select value and you can use it.
You use the iterated object name jugador while doing ng-repeat.
I am struggling to get this into an ng-option. Is it even possible?
<select ng-model="detail_type_id">
<optgroup ng-repeat="type in data.detailTypes" label="{{type.name}}">
<option ng-repeat="t in type.children" value="{{t.id}}">{{t.name}}</option>
</optgroup>
</select>
DetailTypes looks like this:
[
{"id":7,
"parent_id":null,
"name":"Contact",
"children":[
{"id":8,
"parent_id":7,
"name":"Address",
"children":[]
},
{"id":12,
"parent_id":7,
"name":"Something else",
"children":[]
}
]},
{"id":16,
"parent_id":null,
"name":"Other",
"children":[
{"id":10,
"parent_id":16,
"name":"Remarks",
"children":[]}
]
}
]
Child id needs to be selected. Nesting cannot be deeper.
The ngOptions directive does not work with multidimensional objects. So you need to flatten your array to use it.
I wrote a filter for that:
app.filter('flatten' , function(){
return function(array){
return array.reduce(function(flatten, group){
group.children.forEach(function(child){
child.groupName = group.name;
flatten.push(child)
})
return flatten;
},[]);
}
})
And the HTML part would be like this:
<select ng-model="detail_type_id"
ng-options="item.id as item.name
group by item.groupName for item
in data.detailTypes | flatten track by item.id">
</select>
Plunker (version #1 with filter):
https://plnkr.co/edit/dxi7j8oxInv2VRJ1aL7F
I also modified your object to be like this:
[{
"id": 7,
"parent_id": null,
"name": "Contact",
"children": [{
"id": 8,
"parent_id": 7,
"name": "Address",
"children": []
}, {
"id": 12,
"parent_id": 7,
"name": "Something else",
"children": []
}]
}, {
"id": 16,
"parent_id": null,
"name": "Other",
"children": [{
"id": 10,
"parent_id": 16,
"name": "Remarks",
"children": []
}]
}]
EDIT:
After suggestion I wrote another version without the filter, but flattening the array inside the controller.
Additional Controller JS:
$scope.flattenDetailTypes = flattenDetailTypes($scope.data.detailTypes);
function flattenDetailTypes(array){
return array.reduce(function(flatten, group){
group.children.forEach(function(child){
child.groupName = group.name;
flatten.push(child)
})
return flatten;
},[]);
}
Markup:
<select ng-model="detail_type_id"
ng-options="item.id as item.name group by item.groupName for item in flattenDetailTypes track by item.id"></select>
Plunker (version #2 without filter):
https://plnkr.co/edit/D4APZ6
I am starting with an array of sources
$scope.sources = [
{
"type": "register",
"name": "Register 1",
"balance": 100
},
{
"type": "register",
"name": "Register 2",
"balance": 100
},
{
"type": "register",
"name": "Register 3",
"balance": 200
},
{
"type": "office",
"name": "Change Drawer",
"balance": 200
},
{
"type": "office",
"name": "Safe",
"balance": 500
}
];
I'm successfully loading the options
<div class="form-group">
<label>Transfer <strong>{{amount(count, start, selectedItem.balance) | currency}}</strong> To:</label>
<select id="transferTo" class="form-control" ng-model="form.to" ng-options="item.name for item in sources | filter:{type:'office'}">
<option value="">-- Select a Source --</option>
</select>
</div>
I've tried using a $timeout function to select it after it works, but it doesn't pass back the correct value to my function
$timeout(function () {
$('#transferTo').val('1');
}, 200);
How would I set the "Safe" as the default option selected when the form loads?
You will need to set a value on your scope that you're setting ng-model equal to:
$scope.form.to = $scope.sources[4];
If your list (sources) is dynamic you can filter the array like this, which will return an array (but leave your array untouched).
filterFilter($scope.sources, {name: 'Safe'})
fiddle
Here is my code to select the country based on ng-options and get tabs based on ng-repeat:
<select ng-model="country" ng-options= "countryName.country for countryName in countryNames" ng-change="getCountry()">
</select>
<ul id="configPhoneTab" class="nav nav-tabs equipmentTab agenttabs">
<li class="active" ng-repeat= "configTab in config" val="configTab[0]">
{{configTab.tabs}}
</li>
</ul>
My tabs in the json file is
[
{
"country": "India",
"tabs": [
{
"title": "India Number",
"type": [
"VOICE",
"FAX",
"VN"
],
"carrier": "L3",
},
{
"title": "Toll Free",
"type": [
"TF"
],
"carrier": "L3",
}
]
},
{
"country": "Aus",
"tabs": [
{
"title": "Aus Number",
"type": [
"VOICE",
"FAX",
"VN"
],
"carrier": "L3",
},
{
"title": "Toll Free",
"type": [
"TF"
],
"carrier": "L3",
}
]
}
How can I retrieve the tabs title from json based on country selection?
You could use a third-party library like [underscorejs] (website address) and retrieve the desired data using some of it's functions for example _.where(...) if '_.fined(...)'
the pivot which your search will be based on would be the $scope.country which in bound to your <select> tag (<select ng-model="country" ng-options= ...)
sorry I cannot provide any working demos right away as I'm answering from a mobile device.
Hope it helped.
I'm trying to preselect options on my multiselect. In order to make my case clear, I've made a JSFiddle.
<select ng-model="properties" id="props" multiple
ng-options="option.name group by option.category for option in options"></select>
Unfortunately, I am bound by the way the object is received, so I guess I need the ng-options attribute.
Does anybody have an idea how I can get both 'Captain America' and 'Dr. Doom' selected on load?
Try changing your controller code to:
function TestCtrl($scope) {
var myOptions = [{
"id": "4",
"name": "Captain America",
"categoryId": "1",
"category": "Heroes"
}, {
"id": "5",
"name": "Iron Man",
"categoryId": "1",
"category": "Heroes"
}, {
"id": "10",
"name": "Magneto",
"categoryId": "2",
"category": "Vilains"
}, {
"id": "9",
"name": "Dr. Doom",
"categoryId": "2",
"category": "Vilains"
}];
$scope.options = myOptions;
$scope.properties = [myOptions[0], myOptions[3]];
}
Explanation: you are setting your selected options (properties) to different instances of the objects than the ones that compose the full list. Use the same object references as shown above.
You are super close, two changes. Define the attributes in your controller like this
$scope.properties = ["Captain America", "Dr. Doom"];
And add a small piece to your ng-options like this
ng-options="option.name as option.name group by option.category for option in options"
Your option.name as will determine what the saved feature looks like in $scope.properties