How to get the checked items from kendo treeview - angularjs

HTML CODE:
<div>
<md-button ng-click="getCheckedItems()">TEST</md-button>
</div>
<div kendo-tree-view="tree"
k-data-source="treeData"
k-on-change="selectedItem = dataItem">
<span k-template>
<md-checkbox !important ng-click='click(dataItem)'>{{ dataItem.text}}</md-checkbox>
</span>
</div>
I want to get the checked items from the treeview and save it as string with ',' between 2 texts using the get function $scope.getCheckedItems = function(){}

Your question is not very clear, but in case if you want to get all the selected checkboxes inside your controller you can do like following.
$scope.getCheckedItems = function () {
var data = $scope.tree.dataSource._data;
for (var i = 0, j = data.length; i < j; i++) {
if (data[i].checked) {
//Item is checked
//You can get the properties using data[i]
console.log(data[i]);
}
}
};

I found out that i need to specify 'items' as child. Here is the working code:
for (var i = 0, j = data.length; i < j; i++) {
for (var x = 0, y = data[i].items.length; x < y; x++)
{
if (data[i].items[x].checked) {
//Item is checked
//You can get the properties using data[i]
console.log(data[i].items[x].text);
}
}
}
Sample data:
dataSource: [
{ text: "foo", expanded: true, items: [
{ text: "bar" }
] },
{ text: "baz", expanded: true, items: [
{ text: "qux" }
] }]

Related

How to convert for loop whit array.slice in for-of or map array.slice for generate col and row?

I have a problem in Angular8. I need to convert a for loop of an array into a loop of for-of or array.map.
I have this code, I pass an array of objects and I need to separate it into col and row array for visualization.
private pages = [];
public grid = [];
public col = 2;
public row = 2;
public indexPage = 0;
private gridSize = this.col * this.row;
private items = [
{
url:'http://url1',
name:'1',
active: false,
},
{
url:'http://url2',
name:'2',
active: false,
},
{
url:'http://url3',
name:'3v',
active: false,
},
{
url:'http://url4',
name:'4v',
active: false,
},
{
url:'http://url5',
name:'5v',
active: false,
},
{
url:'http://url6',
name:'6v',
active: false,
},
{
url:'http://url7',
name:'7v',
active: false,
},
]
ngOnInit() {
if(this.col === 0 || this.row === 0) {
this.grid = this.items;
}else {
for (let i = 0; i < this.items.length; i+= this.gridSize) {
let page = this.items.slice(i , i+this.gridSize);
this.pages.push(page);
}
for (let i = 0; i < this.pages.length; i++) {
let pageUrl = [];
for(let j = 0; j < this.pages[i].length; j+=this.col) {
let urls = this.pages[i].slice(j , j+this.col);
pageUrl.push(urls);
}
this.grid.push(pageUrl);
}
}
}
my output from object whit col = 2; row = 2; :
pages --> (2) [Array(4), Array(3)] // 2 pages
--> (0) [{...},{...},{...},{...}] // 1st page - 4 elemet
--> (1) [{...},{...},{...}] // 2nd page - 3 element
grid --> (2) [Array(2), Array(2)]
-->(0) [Array(2), Array(2)] // page1 - 2 row
--> (0)[{...},]{...}] // 2 col x row
--> (1)[{...},]{...}] // 2 col x row
--> (1) [Array(2),Array(1)] // page 2 - 2row
--> (0)[{...},{...}] // 2 col x row
--> (1)[{...}] . // 1col x row
the output is correct, but tslint gives me an error on for loop:
Expected a 'for-of' loop instead of a 'for' loop with this simple
iteration
ps: the rows and columns are customizable
This is how you can convert your loops into for-of loops:
private pages = [];
public grid = [];
public col = 2;
public row = 2;
public indexPage = 0;
private gridSize = this.col * this.row;
private items = [
{
url:'http://url1',
name:'1',
active: false,
},
{
url:'http://url2',
name:'2',
active: false,
},
{
url:'http://url3',
name:'3v',
active: false,
},
{
url:'http://url4',
name:'4v',
active: false,
},
{
url:'http://url5',
name:'5v',
active: false,
},
{
url:'http://url6',
name:'6v',
active: false,
},
{
url:'http://url7',
name:'7v',
active: false,
},
]
ngOnInit() {
if(this.col === 0 || this.row === 0) {
this.grid = this.items;
}else {
for (let item of this.items) {
let itemIndex = this.items.indexOf(item);
let page = this.items.slice(itemIndex , itemIndex+this.gridSize);
this.pages.push(page);
}
for (let iPage of this.pages) {
let pageUrl = [];
let j = 0;
for(let jPage of iPage.length) {
let urls = iPage.slice(j , j+this.col);
pageUrl.push(urls);
j+=this.col;
}
this.grid.push(pageUrl);
}
}
}

How to programmatically check checkbox with dynamic model name?

I have created a some checkboxes with dynamic model name like this:
<label ng-repeat="item in main.itemDetails">
<input type="checkbox" checklist-value="item.price"
ng-click="itemChanged(item)" ng-model="checkboxes[item.name]">
{{item.name}} - <b>{{item.price}} €</b>
<br>
</label>
In my controller, I want to check some checkboxes if their model's name exists in array $scope.selectedItems.
I'm trying to do something like this but it isn't working:
for (var i = 0, j = $scope.selectedItems.length; i<j; i++) {
$scope['selectedItems[i].name'].isChecked = true;
}
for example if item.name = 'Item1' I want the model to be named $scope.Item1 and later I want to call $scope.Item1.isChecked = true;
What Am I doing wrong here?
Your are storing the model in the $scope.checkboxes, so you can set its value to true like the code below.
for (var i = 0, j = $scope.selectedItems.length; i<j; i++) {
$scope.checkboxes[$scope.selectedItems[i].name] = true;
}
It looks like your using a string literal here:
for (var i = 0, j = $scope.selectedItems.length; i<j; i++) {
$scope['selectedItems[i].name'].isChecked = true;
}
Just change this to read:
for (var i = 0, j = $scope.selectedItems.length; i<j; i++) {
$scope[selectedItems[i].name].isChecked = true;
}
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.main = [{
'name':'test1',
'price':'23',
'isChecked':false
},
{
'name':'test2',
'price': '25',
'isChecked':false
},
{
'name':'test3',
'price': '21',
'isChecked':false
}];
$scope.selectedItems = [{
'name':'test1'
},
{
'name':'test2'
}];
angular.forEach($scope.main, function(valueMain){
angular.forEach($scope.selectedItems,function(valueSelected){
if(valueMain.name=== valueSelected.name){
valueMain.isChecked = true;
}
})
});
$scope.toggleCheck = function(item){
if(item.isChecked === true){
item.isChecked === false;
}else{
item.isChecked === true;
};
}
}
<script src="https://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<label ng-repeat="item in main">
<input type="checkbox" ng-model="item.isChecked" ng-checked="item.isChecked" ng-change="toggleCheck(item)">
{{item.name}} - <b>{{item.price}} €</b>
<br>
</label>
</div>
</div>
Angular Foreach is the easiest way to solve this kind of problem.

how can i draw dynamic highchart. the y-axis and the number of charts are dynamic from json

im new in angular js and i need to use highchart in my angular page . the problem is that i must draw chart with dynamic data from json and the number of charts will be dynamic too , maybe it should draw 3 or 4 different chart from one json . I searched alot but couldnt solve my problem.
this code works but show the data in one chart in different series. I need to show each series in different charts, and in this case the json send 4 data but it will be changed .
1. List item
$scope.draw_chart = function(){
Highcharts.chart('container2', {
chart:{
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
var this_chart = this;
$scope.ws = ngSocket('ws://#');
$scope.ws.onOpen(function () {
});
var k = 0 ;
var time=0;
$scope.points_avarage = [];
$scope.ws.onMessage(function (message) {
listener(JSON.parse(message.data));
var z = JSON.parse(message.data);
var line_to_draw = z.result.length;
var j = 0 ;
for(i=0 ; i < line_to_draw*2 ; i+=2)
{
$scope.data_to_draw[i] = {
name : z.result[j][0]['name'] ,
y : z.result[j][0]['rx-bits-per-second']
}
$scope.data_to_draw[i+1] = {
name : z.result[j][0]['name'] ,
y : z.result[j][0]['tx-bits-per-second']
}
j++;
}
this_chart.series[0].name= $scope.data_to_draw[0].name;
this_chart.series[1].name= $scope.data_to_draw[1].name;
this_chart.series[2].name= $scope.data_to_draw[2].name;
this_chart.series[3].name= $scope.data_to_draw[3].name;
for(i=0; i < line_to_draw*2; i++) {
var x = (new Date()).getTime(); // current time
var y = parseInt($scope.data_to_draw[i].y);
this_chart.series[i].addPoint([x, y], true, true);
}
});
var d = new Date().toTimeString();
}
}
},
global: {
useUTC: false
},
title: {
text: 'Live data'
},
xAxis: {
type: 'datetime'//,
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
width: 1,
color: '#808080'
}
]
}
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [{
data: (function () {
var data = [],
time = (new Date()).getTime(),
i;
for (i = -5; i <= 0; i += 1) {
data.push({
x: time ,
y: 0
});
}
return data;
}())
},
{
data: (function () {
var data = [],
time = (new Date()).getTime(),
i;
for (i = -5; i <= 0; i += 1) {
data.push({
x: time ,
y: 0
});
}
return data;
}())
},
{
data: (function () {
var data = [],
time = (new Date()).getTime(),
i;
for (i = -5; i <= 0; i += 1) {
data.push({
x: time ,
y: 0
});
}
return data;
}())
},
{
data: (function () {
var data = [],
time = (new Date()).getTime(),
i;
for (i = -5; i <= 0; i += 1) {
data.push({
x: time ,
y: 0
});
}
return data;
}())
}
]
});
};
<div id="containet" ng-init="draw_chart()"></div>

Filtering out objects with certain property value in an array (Angular)

Trying to filter through an array in Angular, and filter out all objects of a certain property
I have an array like this:
[
{
"group":"Group A",
},
{
"group":"Group A",
},
{
"group":"Group B",
},
{
"group":"Group B",
}
{
"group":"Group C",
},
{
"group":"Group C",
}
]
...and I want to write a function to return an array with only Group A and B (not Group C).
So far this is what I have:
function filterStandings() {
for (var i = 0, len = $scope.originalArray.length; i < len; i++) {
$scope.filteredArr = [];
if (originalArray[i].group !== "Group C") {
$scope.filteredStandingsArr.push($scope.originalArray[i]);
}
}
return $scope.filteredArr;
};
Then I when I try to display this array in my view by calling the filterStandings() function, nothing shows up.
Can anyone help?
Array.prototype.filter()
For your use case:
$scope.filteredArr = $scope.originalArray.filter(function(item){
return item.group !== 'Group C'
});
Try this :
$scope.test = function () {
$scope.filteredArr = [];
for (var i = 0; i < $scope.items.length; i++) {
if ($scope.items[i].group != "Group C") {
$scope.filteredArr.push($scope.items[i]);
}
}
return $scope.filteredArr;
};
You have just miss to use the $scope services and initialize your new array (filteredArr) in the for-loop.
You can also use the filter keyword :
JS
$scope.filteredArr = function (item) {
return item.group != "Group C";
};
HTML
<div ng:repeat="item in originalArray| filter: filteredArr ">
{{item}}
</div>

Dynamic angular chart

I'm trying to create a dynamic chart from userTemplate object.
I'm using this directive angular-flot and I want create the dataset and options of directive dynamically.
Its work but I have this error
Error: [$rootScope:infdig] http://errors.angularjs.org/1.2.21/$rootScope/infdig?p0=10&p1=%5B%5B%22fn%3…ection%5C%22%3A%7B%5C%22color%5C%22%3A%5C%22%2354728c%5C%22%7D%7D%22%5D%5D
at Error (native)
at http://mwm3-gui/asset/script/vendor/angular2.1/angular.min.js:6:450
at k.$get.k.$digest (http://mwm3-gui/asset/script/vendor/angular2.1/angular.min.js:110:66)
at k.$get.k.$apply (http://mwm3-gui/asset/script/vendor/angular2.1/angular.min.js:112:173)
at http://mwm3-gui/asset/script/vendor/angular2.1/angular.min.js:122:253
at e (http://mwm3-gui/asset/script/vendor/angular2.1/angular.min.js:37:440)
at http://mwm3-gui/asset/script/vendor/angular2.1/angular.min.js:41:120
HTML
<div ng-repeat="panel in row.panels" class="{{panel.columnClass}}" resizable id="{{panel.id}}" r-directions="['right']">
<flot dataset="getDataForChart(panel)" options="getOptionForChart(panel)" height="{{panel.graph.height}}"></flot>
</div>
CONTROLLER
$scope.userTemplate = [
{
blockId: 'blockUno',
title: 'Block title',
rows: [
{
rowId: 'rowUno',
title: 'Row Title 1',
panels: [
{
id: 'palel-report-1',
title: 'uno',
columnClass: 'col-md-4',
graph: {
height: 250,
type: "BAR",
countBy: "status"
}
},
{
id: 'palel-report-2',
title: 'due',
columnClass: 'col-md-4',
graph: {
height: 250,
type: "PIE",
countBy: "status"
}
},
{
id: 'palel-report-3',
title: 'tre',
columnClass: 'col-md-4',
graph: {
height: 250,
type: "BAR",
countBy: "status"
}
}
]
}
],
tables: []
}
];
$scope.getDataForChart = function(panel) {
var graphData = [];
var countBy = panel.graph.countBy;
var arr = $scope.reportingData;
for (var i = 0; i < arr.length; i++) {
var valueOfkey = arr[i][countBy];
graphData.push(valueOfkey);
}
var a = [], b = [], prev;
graphData.sort();
for (var i = 0; i < graphData.length; i++) {
if (graphData[i] !== prev) {
a.push(graphData[i]);
b.push(1);
} else {
b[b.length - 1]++;
}
prev = graphData[i];
}
var graphData = [];
for (var i = 0; i < a.length; i++) {
var singleO = {label: '' + a[i], data: [[i, b[i]]]};
graphData.push(singleO);
}
return graphData;
};
$scope.getOptionForChart = function(panel) {
var options = angular.copy($scope.defaultPlotOptions);
var typeGraph = panel.graph.type;
switch (typeGraph) {
case "BAR":
options.series.bars.show = true;
break;
case "LINE":
options.series.lines.show = true;
break;
case "PIE":
options.series.pie.show = true;
break;
case "POINT":
options.series.points.show = true;
break;
case "TABLE":
break;
}
return options;
};
The error you get is from an infinite digest loop.
In a couple of places you are calling functions that return new items each time. Here's an example from the docs linked from the error message you received that suggests this may cause this error:
One common mistake is binding to a function which generates a new
array every time it is called. For example:
<div ng-repeat="user in getUsers()">{{ user.name }}</div>
$scope.getUsers = function() { return [ { name: 'Hank' }, { name: 'Francisco' } ]; };
Since getUsers() returns a new array, Angular
determines that the model is different on each $digest cycle,
resulting in the error. The solution is to return the same array
object if the elements have not changed:
var users = [ { name: 'Hank' }, { name: 'Francisco' } ];
$scope.getUsers = function() { return users; };
In your code, you are doing the same binding to getDataForChart and getOptionForChart.

Resources