I am new to angularjs, i want to use dropdownlist with treeview structure. i used both dropdownlist and treeview control separately but find difficulty in using together. can anyone have idea about how to use both together(dropdownlist+treeview)
You can use simple select control. I hope you are grouping values by some property. Lets say you have following data structure:
$scope.data = [
{
id: 1,
value: "Cat",
type: "Animal"
},
{
id: 2,
value: "Dog",
type: "Animal"
},
{
id: 3,
value: "Lion",
type: "Animal"
},
{
id: 4,
value: "Parrot",
type: "Bird"
},
{
id: 5,
value: "Sparrow",
type: "Bird"
},
];
You can group your data by "type" field and show a treeview dropdown as follows:
<select ng-options="obj.value group by obj.type for obj in data track by $index"></select>
For more details you can look at https://docs.angularjs.org/api/ng/directive/ngOptions
Related
I have this object:
phraseFormId = [
{
id: 1,
name: 'Word'
}, {
id: 2,
name: 'Sentence'
}
];
What I would like to do is to change this read only row.formId to be a SELECT element where it will display and where I can choose new values:
<div>
<div>{{ row.formId}}</div>
</div>
Can anyone give me some ideas how I can do this?
Thanks
Certainly not sure, what exactly you are looking for but have a look on this fiddle, simple enough to start with. Let me know, if your problem statement is different.
Using
ng-repeat
Fiddle: http://jsfiddle.net/U3pVM/26336/
It is a little unclear exactly what you are asking for, but I think I may have found a solution.
Here is a DEMO
Let me know if this is what you were looking for!
It utilizes ng-options with select to create a dropdown with values that will bind to a model property
Html
<div ng-repeat="item in phraseFormId">
<h4 ng-bind="'Item ' + $index"></h4>
id: {{item.id}}<br>
name: {{item.name}}<br>
formId:
<select ng-model="item.formId" ng-options="id for id in formIds"></select>
</div>
Controller
$scope.formIds = [1,2,3];
$scope.phraseFormId = [
{
id: 1,
formId: 1,
name: 'Word'
}, {
id: 2,
formId: 2,
name: 'Sentence'
},
{
id: 3,
formId: 1,
name: 'Paragraph'
}, {
id: 4,
formId: 3,
name: 'Sentence'
}
];
i have 2 select boxes,which is getting the data using ng-options and hardcoded.
the second select box should show the data based on the selected data in first selectbox. this is the plunker.
https://plnkr.co/edit/r1S1e61H3RfH3uYGYTBP?p=preview
can anyone please help me.
$scope.data = [{
cities: [{
id: 1,
title: 'Mysore'
}, {
id: 2,
title: 'Bangalore'
}, {
id: 3,
title: 'Delhi'
}, {
id: 4,
title: 'Mumbai'
}],
maps: [{
id: 1,
title: 'Zoo',
city_id: 1
}, {
id: 2,
title: 'Palace',
city_id: 1
}, {
id: 3,
title: 'Beach',
city_id: 4
}]
}];
You can pass the selected city's id from 1st drop down as a filter to 2nd drop down like below
<select name="mapSelect" required="true" ng-options="map as map.title for map in data[0].maps | filter:{'city_id':citySelect.selectedOption.id}" ng-model="mapSelect.selectedOption"></select>
I have $scope.selectedUsers set as an array with just 1 object, which is an exact match of one of the objects from my available list of all $scope.users, altho the selected user is not highlighted in my <select multiple...>. Shouldn't it be highlighted?
Js:
$scope.selectedUsers = [
{ id: 2, name: "Jenny" }
];
$scope.users = [
{ id: 1, name: "Frank" },
{ id: 2, name: "Jenny" }
];
Html:
<select multiple ng-model="selectedUsers" ng-options="user as user.name for user in users"></select>
Live demo: http://plnkr.co/edit/wpfvhvuShFVE07cyBE6M?p=preview
which is an exact match of one of the objects from my available list of all $scope.users
No, they are not the same even though both objects has similar key-values. Angular uses strict comparison of objects (===) and two objects are equal only if they are the same object (references the same object).
Correct code in your case:
$scope.users = [
{ id: 1, name: "Frank" },
{ id: 2, name: "Jenny" }
];
$scope.selectedUsers = [
$scope.users[1]
];
Demo: http://plnkr.co/edit/Czb7JuUzl7dPa08gsqUD?p=preview
Hello i'm trying to use ng-options to get a grouping of countries by region. It only works by repeating the group name in every row. Is it possible to do it using the following json :
$scope.countries = [
{ region: "americas", countries: [{ value: "usa", key: "1" }, { value: "mexico", key: "2" }] },
{ region: "Africa", countries: [{ value: "3", key: "Algeria" }, { value: "4", key: "Morocco" }, { value: "5", key: "Tunisia" }] },
];
ng-options is pretty locked down in it's definition, so you'll probably need to loop through your countries array and add the region, something like:
$scope.countries_with_regions = [];
$scope.countries.forEach(function(region){
region.countries.forEach(function(country){
country.region = region.region;
$scope.countries_with_regions.push( country );
});
});
then you can do your ng-options with the countries_with_regions
You data structure fo countries needs to be like
countries = [{value : 3, key: "algeria", region : "africa"}, ...]
for the ng-options to be able to "group by" region.
I use kendo ui grid with angular. I want the grid to be updated with every change in the array (of any property). Meaning, if my data is:
this.rowData = [{ id: "1", name: "A", age: "16" }, { id: "2", name: "B", age: "42" }];
and the age is changed from 16 to 17 I want the grid to be updated automatically.
I understand that I can use ObservableArray and when updating the observable the grid will be updated but I don't want the entire application to know the observable. I want to be able to update the original rowData and affect the grid. Any suggestions of how I do that?
I thought that adding a template to a row or a specific column with angular binding will help but it didn't, here is an example of it:
function Controller(GridConstants) {
this.rowData = [{ id: "1", name: "A", age: "16" }, { id: "2", name: "B", age: "42" }];
this.gridDataSource = new kendo.data.DataSource({
data: new kendo.data.ObservableArray(this.rowData),
schema: {
model: { id: "id" }
}
});
this.gridOptions = {
dataSource: this.gridDataSource,
selectable: "row",
columns: [
{
field: "name",
title: "Name"
},
{
field: "age",
title: "Age",
template: "<label>{{dataItem.age}}</label>"
}
],
selectable: "single"
};
}
You can try ng-bind instead:
template: "<label ng-bind='dataItem.age'></label>"
var rowDataObservable = new kendo.data.ObservableArray(this.rowData);
...
data: rowDataObservable,
...
//and you need work with rowDataObservable, this will work
rowDataObservable[0].age = 17;