I have a dropdown list of games, and depending on which game you select, it should show a list of things I need to do for that game. My problem is getting the list to show the steps for only the currently selected game. Can this be done with ng-model, will I need to use functions, or is there an even simpler way to do this?
Also, is there any information I've included in my sample that would become redundant after utilizing provided suggestions?
HTML
<select>
<option ng-repeat="game in things.toBeat">{{ game.title }}</option>
</select>
<ul>
<li ng-repeat="step in things.toDo">{{ step.todo }}</li>
</ul>
JS
var games = [
{ "id" : "0", "title" : "Super Mario Bros." },
{ "id" : "1", "title" : "Pac-man" }
];
var todos = [
{ "gameID" : "0", "todo" : "Collect coins" },
{ "gameID" : "0", "todo" : "Rescue princess" },
{ "gameID" : "1", "todo" : "Eat dots" },
{ "gameID" : "1", "todo" : "Eat fruit" }
];
$scope.things = { "toBeat" : games, "toDo" : todos };
First you need to give the games select an ng-model so the second 'todo' ng-repeat can be aware of what game is selected:
<select ng-model="selectedGame">
Then you need to give the options of the selectedGame select the id value of the games so "selectedGame" will have the value of that id.
<option ng-repeat="game in things.toBeat" value="{{game.id}}">{{ game.title }}</option>
finally, you tell to the 'todo' ng-repeat to apply the filter according to the selectedGame value, matching it with the gameID field of each 'step'.
<li ng-repeat="step in things.toDo | filter: {gameID:selectedGame}">{{ step.todo }}</li>
The final code should look like this:
<select ng-model="selectedGame">
<option ng-repeat="game in things.toBeat" value="{{game.id}}">{{ game.title }}</option>
</select>
<ul>
<li ng-repeat="step in things.toDo | filter: {gameID:selectedGame}">{{ step.todo }}</li>
</ul>
I hope it helps
Edit:
If you want to set the default selectedGame you can use ng-init:
<select ng-model="selectedGame" ng-init="selectedGame='0'">
Related
I have the following code
<select name='empId'>
<option *ngFor="let e of employees" [value]="e.id"> {{e.name}}</option>
</select>
The above code is working fine for static list of employees.
How to achieve dynamic select option from employees based on UI selection.
MyData
[
{
id:1
name:"user1"
},
{
id:2
name:"user2"
}
]
There might be issue with data. Data should be in Inverted comma ("id":"1") format. Please try this.
[
{
"id":"1"
"name":"user1"
},
{
"id":"2"
"name":"user2"
}
]
I have a drop-down list that I'm trying to create where the value displayed in the drop-down is different to the options available - I'm using angularjs for this purpose. For example, if I had the following text, I'd want to display the full value when the user opens the drop-down:
A - A is for Apple
B - B is for Banana
But on the page I only want to display A or B, not the full description, as in this picture:
This is the closest I've got so far (where my list of objects are just objects with a Value and Description property) but I can't seem to show the short value in the dropdown, although I know I've seen this kind of set up online on various sites.
<select>
<option ng-repeat="item in myObject.Options" value="{{item.Value}}" title="{{item.Description}}">{{item.Description}}</option>
</select>
Where the object would look something like
var myObject = { "Options" : [
{ "Value":"A" , "Description":"A is for Apple" },
{ "Value":"B" , "Description":"B is for Banana" },
{ "Value":"C" , "Description":"C is for Cherry" } ]};
This is not possible, because you have uses the HTML select component that is not able to distinguish between the displayed text in the dropdown and the shown value.
However you could build an own directive for implementing a similar behaviour, for example with a bootstrap dropdown menu or md-select.
For example :
<md-select md-selected-text="selectedItem.Value" ng-model="selectedItem">
<md-option ng-repeat="item in items" ng-value="item">
{{ item.Description }}
</md-option>
</md-select>
Hope this will help you !
If you only want to display the Value part, you can use this:
<select>
<option ng-repeat="item in myObject.Options" value="{{item.Value}}" title="{{item.Description}}">
{{item.Value}} - {{item.Description}}
</option>
</select>
Example:
var app = angular.module('app', []);
app.controller('TestController', function($scope) {
$scope.myObject = {
"Options": [{
"Value": "A",
"Description": "A is for Apple"
}, {
"Value": "B",
"Description": "B is for Banana"
}, {
"Value": "C",
"Description": "C is for Cherry"
}]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller='TestController'>
<select>
<option ng-repeat="item in myObject.Options" value="{{item.Value}}" title="{{item.Description}}">{{item.Value}} - {{item.Description}} </option>
</select>
</div>
i'm kind of new in Angular, and I facing a problem, I didn't find an answer that could help me, if some one could, thank you. :)
I have a json like this:
"items": [
{
"post_type": "release",
"label": "Releases"
},
{
"post_type": "news",
"label": "Notícias",
"options": [
{
"id": 1,
"name": "Galeria de Fotos"
},
{
"id": 2,
"name": "Agência de Notícias"
},
{
"id": 3,
"name": "Rádio"
},
{
"id": 4,
"name": "TV"
}
]
},....
And I m getting data like:
var _preparingPostTypes = function ($scope) {
$scope.post_types = [];
PostTypeService.getPostTypes().then(function (data) {
$scope.post_types = data.data;
});
};
What I want to do is create 2 selects, 1st - with the post_type ('release', 'news') and a second one with the 'options' array from a post_type, that is only visible when select an option with the 'options' in the array like 'news'. I did something like this, where I can get the post_type like a charm, but I don't know how to proceed:
<div class=form-group>
<label>Pesquisar em:</label>
<select title="Pesquisar em:" class="form-control select-post-type"
ng-model="widget.post_type"
ng-options="item.post_type as item.label for item in post_types.items"></select>
</div>
EDIT:
In my request I need to pass the post_type string to server, from the first select, so the ng-options is:
ng-options="item.post_type as item.label for item in post_types.items
Not:
ng-options="item as item.label for item in post_types.items
Thanks everybody!
You can add an ng-change to the first select that calls a function that loads the options
<select title="Pesquisar em:" class="form-control select-post-type"
ng-model="widget.post_type"
ng-options="item as item.label for item in post_types.items" ng-change="typeChanged()"></select>
And the function would load inside $scope.options the selected type options. Then you iterate over $scope.options in the second select
UPDATE:
I haven't tested the code, but it may guide you
Select:
<select title="Options:" class="form-control select-post-type"
ng-model="widget.option"
ng-options="option as option.name for option in options">
Change function (triggered when the value of the first select changes, so it will have the responsibility of loading the options of the post_type selected):
$scope.typeChanged = function() {
for (var i = 0; i < $scope.post_types.items.length; ++i) {
if ($scope.post_types.items[i].label == $scope.widget.post_type) $scope.options = $scope.post_types.items[i].options || [];
}
}
widget.post_type should contain the selected item. So the other select can have options like option as option.name in widget.post_type.options. Note that you should probably have an options collection on each item if you want this to work.
You can do this very easily using following technique. You just need to use the ng-model from the first select. See my approach:
<label>Pesquisar em:</label>
<select title="Pesquisar em:" class="form-control select-post-type"
ng-model="firstSelect"
ng-options="item as item.label for item in post_types.items"></select>
<select title="Second one" class="form-control select-post-type"
ng-model="secondSelect" ng-show="firstSelect.options"
ng-options="option as option.name for option in firstSelect.options"></select>
Im currently trying to nest a <select> inside a div with a ng-repeat
something like this:
<li ng-repeat="item in items >
<div class="row">
<div class="col-xs-7">
<span ng-bind="item.Name"></span>
</div>
<div class="col-xs-4 modal-body--ul--li__dropdown_container">
<select ng-model="typemodel" >
<option ng-repeat="usertype in item.userGroups"></option>
</select>
</div>
<div class="col-xs-1">
<a ng-click="add(item)"></a>
</div>
</div>
</li>
In the controller im adding the item to a new list with selected items. I also want to add the value from the dropdown as a new value to the list in the controller.
$scope.add = function (item) {
//New value with the value from the dropdown
item.recipientType = typemodel;
$scope.selected.push(item);
};
The list :
$scope.items = [
{
"Name":"Name1",
"userGroups":[
{ "type": "gruop1" },
{ "type": "gruop2" },
{ "type": "group3" }
]
},
{
"Name":"Name2",
"userGroups":[
{ "type": "gruop1" },
{ "type": "gruop2" },
{ "type": "group3" }
]
}
]
In short i need the selected value from the dropdown when i hit the "add", the value of the current typemodel.
This is how it looks now, but it dont work. I know i have to get the correct model and maybe track the items list by $index, but after searching the web the whole day for a solution, im still stuck!
All help is appreciated.
-Thanks!
ps. please comment if something is missing from the question, or something more is needed to solve this.
First, change your dropdown list to
<select ng-options="usertype in item.userGroups" ng-model="item.recipientType">
Then when you trigger the add function, item's property recipientType is already set.
$scope.add = function (item) {
console.log(item.recipientType);
$scope.selected.push(item);
};
I have an angular grid (ng-grid) where one ove the columns has a dropdown which is bound to a property of the objects displayed in the rows.
<div class="gridStyle span9" ng-grid="gridOptions"></div>
$scope.types = ['cat', 'dog' 'rat'];
$scope.gridOptions = {
data : 'AnimalData',
columnDefs : [{
field : 'name',
displayName : 'Name'
}, {
field : 'birthday',
displayName : 'Birthday'
},{
field : 'type',
displayName : 'type'
cellTemplate : 'cellTemplate.html'
}]
};
cellTemplate.html:
<div>
<select ng-model="AnimalData[ row.rowIndex ].type">
<option ng-repeat="item in types">{{item}}</option>
</select>
</div>
This binds to my objects perfectly well but when I order my grid the dropdowns do not order they just stay in the same place with the values not changing. How would i go about fixing this?
Ok, found the issue. To reference the original object you need to change
AnimalData[ row.rowIndex ].type to row.entity.myEditableProperty.type
eg:
<div><select ng-model="row.entity.myEditableProperty.type" ng-options="item for item in types"></select></div>
Proof of concept Plunkr: http://plnkr.co/edit/i7vXng?p=preview