My controller code looks like
$scope.items = [{
heading: 'Sports',
types: [{
name: 'Football',
}, {
name: 'Persie',
}, {
name: 'Ronaldo',
}, {
name: 'Messy',
}],
id: '1'
}, {
heading: 'Cricket',
types: [{
name: 'Tendulkar',
}, {
name: 'Lara',
}, {
name: 'Ponting',
}],
id: '2'
}];
My view contains something like this :
How can I get the selected values of options when user clicks submit button
Here is the jsfiddle
I used ng-repeat to build the select and ng-options to fill them, you then have to use the relative ng-model to get the selections.
HTML:
<div ng-app ng-controller="MyCtrl">
<select class="select fancy" ng-repeat="(i, item) in items" ng-model="searchOption[i]" ng-options="type.name for type in item.types"></select>
<button ng-click="submitIt()">Submit</button>
</div>
Javascript:
function MyCtrl($scope) {
$scope.submitIt = function () {
console.log($scope.searchOption);
};
$scope.searchOption = [];
$scope.items = [{
heading: 'Sports',
types: [{
name: 'Football',
}, {
name: 'Persie',
}, {
name: 'Ronaldo',
}, {
name: 'Messy',
}],
id: '1'
}, {
heading: 'Cricket',
types: [{
name: 'Tendulkar',
}, {
name: 'Lara',
}, {
name: 'Ponting',
}],
id: '2'
}];
}
Related
I have 2 object arrays and will use those value on checkbox for view. I want to merge 2 obj arrays to make it one json object file. help me please
$scope.fruits = [
{ name: 'apple', selected: true },
{ name: 'orange', selected: false },
{ name: 'pear', selected: true },
{ name: 'naartjie', selected: false }
];
$scope.color = [
{ name: 'red', selected: true },
{ name: 'green', selected: false },
{ name: 'orange', selected: true },
{ name: 'yellow', selected: false }
];
And the view,
<label ng-repeat="fruit in fruits" class="checkbox-inline">
<input type="checkbox" name="selectedFruits[]" value="{{fruitName}}" ng-model="fruit.selected"> {{fruit.name}}</label>
<label ng-repeat="color in colors" class="checkbox-inline">
<input type="checkbox" name="selectedColors[]" value="{{colorName}}" ng-model="color.selected"> {{color.name}}</label>
And the output i want like below:
[{
"name": "apple",
"color": "red",
"selected": true
},
{
"name": "orange",
"color": "yellow",
"selected": true},
{
"name": "pear",
"color": "green",
"selected": true}]
you can use map function for this.
var fruits = [
{ name: 'apple', selected: true },
{ name: 'orange', selected: false },
{ name: 'pear', selected: true },
{ name: 'naartjie', selected: false }
];
var color = [
{ name: 'red', selected: true },
{ name: 'green', selected: false },
{ name: 'orange', selected: true },
{ name: 'yellow', selected: false }
];
var arr = fruits.map((o,i)=>{
o.color = color[i].name;
return o;
});
console.log(arr)
Use Angular merge enter link description here
var mergedObject = angular.extend(object1, object2);
And manual way by ignoring null and missing values would be
this
Hello i am have two kendo ui drodDownList:
kendo-drop-down-list(
ng-model = 'vm.firstList'
k-data-source='vm.filterData'
k-data-text-field='"title"'
k-data-value-field='"name"'
k-value-primitive='true'
k-filter='"contains"'
k-on-change='vm.onChange($event)'
)
and
kendo-drop-down-list(
ng-model = 'vm.secondList'
k-data-source='vm.filterData'
k-data-text-field='"title"'
k-data-value-field='"name"'
k-value-primitive='true'
k-filter='"contains"'
k-on-change='vm.onChange($event)'
)
it is data source:
this.filterData = [
{ name: 'Brown', title: 'Soier' },
{ name: 'Maks', title: 'Inkl' },
{ name: 'Lint', title: 'Baks' },
{ name: 'Hover', title: 'Niyou' }
]
they have same data source, and i am want when choosing item in first dd then remove this item from other dd (and likewise for the second). At the same time, two identical elements can not be selected.
my solution:
in first dd add:
k-on-change='vm.onFirstSelect(kendoEvent)'
k-data-source='vm.firstFilterElements'
for second dd:
k-on-change='vm.onSecondSelect(kendoEvent)'
k-data-source='vm.secondFilterElements'
in controller add:
this.filterElements = [
{ name: 'Brown', title: 'Soier' },
{ name: 'Maks', title: 'Inkl' },
{ name: 'Lint', title: 'Baks' },
{ name: 'Hover', title: 'Niyou' }
]
this.firstFilterElements = this.filterElements;
this.secondFilterElements = this.filterElements;
onFirstSelect(e) {
this.secondFilterElements = this.filterByItem(e);
}
onSecondSelect(e) {
this.firstFilterElements = this.filterByItem(e);
}
filterByItem (e) {
return this.filterElements.filter(function (el) {
return el.name !== e.sender.dataItem(e.item)
[e.sender.options.dataValueField];
});
}
if someone can optimize it i will be glad)
I have mega menu that generate from JSON object like this:
[
{
"name":"Menu Item 1",
"id":"8",
"children":[
{
"name":"Sub Menu 1-1",
"id":"1",
"children":[
{
"name":"Sub Menu 1.1.1",
"id":"2"
},
{
"name":"Sub Menu 1.1.2",
"id":"3"
}
]
},
{
"name":"Sub Menu 1.2",
"id":"4"
}
]
},
{
"name":"Menu Item 2",
"id":"7",
"children":[
{
"name":"Sub Menu 2.1",
"id":"5"
},
{
"name":"Sub Menu 2.2",
"id":"6"
}
]
}
]
How can I create a custom filter to retrieve only the matched items by their name recursively without changing the original structure?
Try this.
var menuItems =[{ name: 'Menu Item 1', id: '8', children:[{ name: 'Sub Menu 1-1', id: '1', children: [{ name: 'Sub Menu 1.1.1', id: '2' }, { name: 'Sub Menu 1.1.2', id: '3' }] }, { name: 'Sub Menu 1.2', id: '4' }]},{ name: 'Menu Item 2', id: '7', children: [{ name: 'Sub Menu 2.1', id: '5' }, { name: 'Sub Menu 2.2', id: '6' }] }];
var result = [];
function isObject(obj) {
return (!!obj.name && !!obj.id);
}
function hasChildren(obj) {
return !!obj.children && Array.isArray(obj.children);
}
function getNameList(item, matchName) {
if(Array.isArray(item)) {
for(var i = 0; i < item.length; i++) {
if(hasChildren(item[i])) {
getNameList(item[i].children, matchName);
}
if(isObject(item[i])) {
if(matchName == item[i].name) result.push(item[i]);
}
}
}
}
getNameList(menuItems, 'Menu Item 1');
console.log(result);
I have a problem with filter my data by category selected by dropdownlist.
Here how looks like my controller:
var category = {
"Dairy": 1,
"Bread": 2,
"Drink": 3,
"Spices": 4,
"Meat": 5
}
$scope.categories = [
{ text: "All", value: 0 },
{ text: "Dairy", value: 1 },
{ text: "Bread", value: 2 },
{ text: "Drink", value: 3 },
{ text: "Spices", value: 4 },
{ text: "Meat", value: 5 }
];
$scope.products = [
{ name: "Milk", value: 3.28, avaible: true, expireDate: "2016-04-29", category: category.Dairy },
{ name: "Serek wiejski", value: 1.28, avaible: false, expireDate: "2016-04-26", category: category.Dairy },
{ name: "Coca-cola", value: 6.98, avaible: true, expireDate: "2017-04-29", category: category.Drink },
{ name: "Corn", value: 0.99, avaible: true, expireDate: "2016-09-19", category: category.Spices },
{ name: "Ham", value: 9.00, avaible: true, expireDate: "2016-04-29", category: category.Meat },
{ name: "Bread", value: 3.78, avaible: true, expireDate: "2016-04-29", category: category.Dairy }
];
Here is HTML
<select ng-model="selectedCategory">
<option ng-repeat="cat in categories" value="{{cat.value}}">
{{cat.text}}
</option>
</select>
<div ng-repeat="product in products | filter: product.category == selectedCategory">
After I change value of dropdown the products are not being filtered. Just for id = 5 it works as expected.
Is condition product.category = selectedCategory wrong?
try this
<div ng-repeat="product in products | filter:{category:selectedCategory}">
Usually, an item is removed from the list of selectable items, after being selected.
But, when I refresh the underlying list of items, the (already) selected items, are selectable too!
How can i avoid this?
My view looks like this:
<div ng-controller="MyCtrl" ng-init=buildList()>
<button ng-click="buildList()">Refresh list</button>
<select multiple ui-select2 data-ng-model="selectedDaltons">
<option data-ng-repeat="dalton in daltons" value="{{dalton.id}}">
{{dalton.name}}
</option>
</select>
</div>
My controller:
function MyCtrl($scope) {
// Averell is preselected (id:4)
$scope.selectedDaltons = [4];
// $scope.daltons is iterated in ng-repeat
// its initially called in ng-init
$scope.buildList = function() {
$scope.daltons = [
{ id: 1, name: 'Joe' },
{ id: 2, name: 'William' },
{ id: 3, name: 'Jack' },
{ id: 4, name: 'Averell' },
{ id: 5, name: 'Ma' }
];
};
};
Here it is as a jsfiddle.
Actually I think I found an solution (to my own question):
Based on the controller of the original question, change the array, before replacing it:
function MyCtrl($scope) {
// Averell is preselected (id:4)
$scope.selectedDaltons = [4];
// $scope.daltons is iterated in ng-repeat
// its initially called in ng-init
$scope.buildList = function() {
// touch array before renewal!!
if (angular.isArray($scope.daltons)) {
$scope.daltons.pop();
}
$scope.daltons = [
{ id: 1, name: 'Joe' },
{ id: 2, name: 'William' },
{ id: 3, name: 'Jack' },
{ id: 4, name: 'Averell' },
{ id: 5, name: 'Ma' }
];
};
};
Here the updated jsfiddle.