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>
Related
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 would like to populate the <select name="selectmodel"> <option> from a nested array of objects based on the selection of the <select name="selectmake"> <option> element.
Here is the multi-dimensional array:
muscleCars = [
{
id: 1, name: "Chevrolet", models: [
{ model: "Camaro" },
{ model: "Corvette" }
]
},
{
id: 2, name: "Dodge", models: [
{ model: "Charger" },
{ model: "Challenger" },
{ model: "Viper" }
]
},
{
id: 3, name: "Ford", models: [
{ model: "GT" },
{ model: "Mustang" }
]
}
];
This is the HTML
//select for Make:
<select name="selectmake" [(ngModel)]="makeListFilter">
<option *ngFor="let muscleCar of muscleCars" [ngValue]="muscleCar.name">{{muscleCar.name}}</option>
</select>
//select for Model:
<select name="selectmodel" [(ngModel)]="modelListFilter">
<option *ngFor="let muscleCar of muscleCars" [ngValue]="muscleCar.models">{{muscleCar.models}}</option>
</select>
So, basically when you select Chevrolet for example, I would like to have the second element populated with Camaro and Corvette.
Currently, the second select element is populated with an array [object Object] for each make, but can't figure out how to dig this deeper.
Here is a plunk:
https://embed.plnkr.co/0eEIJg5uzL6KsI70wWsC/
Any help would be appreciated.
This is how your HTML should look like:
<select name="selectmake" [(ngModel)]="makeListFilter">
<option *ngFor="let muscleCar of muscleCars" [ngValue]="muscleCar">{{muscleCar.name}}</option>
</select>
<select name="selectmodel" [(ngModel)]="modelListFilter">
<option *ngFor="let carModel of makeListFilter?.models" [ngValue]="carModel.model">{{carModel.model}}</option>
</select>
So, what's happening here is that selected value of selectmake dropdown is binded to makeListFilter and second dropdown selectmodel is populated based on selected value of first dropdown. You will notice I binded the whole Object that is selected in first dropdown using ngValue directive so it can be used to populate second dropdown. Another interesting thing you'll notice is Elvis operator (?) I used in second dropdown - it is used to tell second dropdown to populate itself only after value is selected in first dropdown, this is necessary to avoid getting error for iterating through an undefined value. If you don't want to use Elvis operator, you can use *ngIf directive to prevent getting mentioned error, but that means that second dropdown will appear only after you select something in the first dropdown:
<select *ngIf="makeListFilter" name="selectmodel" [(ngModel)]="modelListFilter">
<option *ngFor="let carModel of makeListFilter.models" [ngValue]="carModel.model">{{carModel.model}}</option>
</select>
Im using ngOptions for select directive like
<select class="form-control" ng-model="users.jobTitle" name="jobTitle" data-ng-options="job as job.value for job in ds.jobTitle" required>
im setting default in controller like
$scope.users.jobTitle = $scope.ds.jobTitle[0];
ds is a json with array jobtitle:
"jobTitle":[
{"id":1,"value":"Service1"},
{"id":2,"value":"Service2"},
{"id":3,"value":"Service3"}
],
now i'm saving and getting result(console) like
jobTitle:Object
$$hashKey:"object:173"
id:1
value:"Service1"
now when i'm editing, feeding the service call data like
$scope.useredit.jobTitle = data.jobTitle;
for
<select class="form-control input-sm" ng-model="useredit.jobTitle" name="jobTitle" data-ng-options="job as job.value for job in ds.jobTitle" required>
</select>
its not setting the object as selected , instead sets the null value in first option..
what i have to do ?
By default, ngModel watches the model by reference, not value. This is
important to know when binding the select to a model that is an object
or a collection.
One issue occurs if you want to preselect an option. For example, if
you set the model to an object that is equal to an object in your
collection, ngOptions won't be able to set the selection, because the
objects are not identical. So by default, you should always reference
the item in your collection for preselections, e.g.: $scope.selected =
$scope.collection[3].
Another solution is to use a track by clause, because then ngOptions
will track the identity of the item not by reference, but by the
result of the track by expression. For example, if your collection
items have an id property, you would track by item.id.
~ Taken from the official docs regarding ngOptions
I tested it out by using ng-options in separate select boxes and it works.
See demo below.
angular.module('app', [])
.controller('TestController', ['$scope',
function($scope) {
$scope.ds = {};
$scope.ds.jobTitle = [{
"id": 1,
"value": "Service1"
}, {
"id": 2,
"value": "Service2"
}, {
"id": 3,
"value": "Service3"
}];
var data = {
jobTitle: {
"id": 1,
"value": "Service1"
}
};
$scope.useredit = {
jobTitle: data.jobTitle
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="TestController">
<br />Without using track by in ngOptions
<select class="form-control" ng-model="useredit.jobTitle" name="jobTitle" data-ng-options="job as job.value for job in ds.jobTitle" required>
</select>
<br />
<br />
<br />Using track by in ngOptions
<select class="form-control" ng-model="useredit.jobTitle" name="jobTitle" data-ng-options="job as job.value for job in ds.jobTitle track by job.id" required>
</select>
</div>
</div>
I have object product = {id: "759", name: "someName", category_id: "139", cartridge_type: 2 ...} in my angular controller.
Why preselected option in ngOptions doesn't work? Select renders empty option as if product.cartridge_type would be null.
HTML
<select class="form-control"
id="cartridge_type"
name="cartridge_type"
ng-init="product.cartridge_type=product.cartridge_type||cartridgeTypeScope[0]"
ng-model="product.cartridge_type"
ng-options="cartridge_type.id as cartridge_type.name for cartridge_type in cartridgeTypeScope">
<option value="">Select type</option>
</select>
JS
$http.get('someApiPath').success(function(data) {
$scope.product = data[0];
console.log( $scope.product );
});
$scope.cartridgeTypeScope = [
{
id: 0,
name : '-'
},
{
id: 1,
name : 'cartridgeType1'
},
{
id: 2,
name : 'cartridgeType2'
}
]
Just simple use cartridgeTypeScope[0].id in ng-init
ng-init="product.cartridge_type=product.cartridge_type||cartridgeTypeScope[0].id"
Thing is that you are using cartridge_type.id as cartridge_type.name which is expecting id in the select but in ng-init you are providing it complete object (cartridgeTypeScope[0]).
So it is not selecting your option value.
Alternatively you can do
You can use same ng-init but remove cartridge_type.id as from your ng-options
ng-init="product.cartridge_type=product.cartridge_type||cartridgeTypeScope[0]"
ng-options="cartridge_type.name for cartridge_type in cartridgeTypeScope"
Hope It help :)
UPDATE
For controller default option you need to do
$scope.product={
"cartridge_type":2
}
UPADTE 2:-
For $http:-
Plunker
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);
};