Hello Sir,
I am trying to implement AngularJS using require function, but the problem is app function is not called only, the line where angular starts is not getting executed, please have a look at my code below:
I appreciate your help
var data = [];
var colNames = [];
var noOfColumns = knimeDataTable.getNumColumns();
var noOfRows = knimeDataTable.getNumRows();
var lineColumns = new Array(noOfColumns);
var parentTitle = "Parent Title"; //provide parenr title here
var chartTitle = ""; //Provide chart title here
var chartSubTitle = "Muliple Box Plots (title)"; //Provide chart sub-title here
var xAxisTitle = "x axis";//Provide chart's x axis title here
var yAxisTitle = "y axis";//Provide chart's y axis title here
var note = "your text comes here"; //Note for explaining the chart
for (var i = 0; i < noOfColumns; i++) {
lineColumns[i] = new Array(noOfRows);
}
for (var rowID = 0; rowID < noOfRows; rowID++) {
var singleObj = {};
for (var colID = 0; colID < noOfColumns; colID++) {
var colName = knimeDataTable.getColumnNames()[colID];
colNames[colID] = colName;
var row = knimeDataTable.getRows()[rowID];
singleObj[colName] = row.data[colID];
var colData = row.data[1];
}
data.push(singleObj);
}
var key = function(data) {
return data.key;
};
require.config({
paths:{
"angularJS" :"http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular",
"underscore":"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore"
},
shim:{
}
});
require(['angularJS','underscore'], function(){
//appending HTML elements
var mDiv = $('<div ng-app="myApp">');
var parentDiv = $('<div class="parent-div" ng-controller="myCtrl">');
//binding the value of dropdown (input) to variable in angular and calling function on change of dropdown
var dropdown = $('<select class="select-list" id="list" ng-model="mySelect" ng-change="showSelectValue(mySelect)"><option ng-repeat="n in numbers track by $index">{{n}}</option></select>');
var table = $('<table id="sample-table"></table>');
var jsonKeys = _.allKeys(data[0]); //getting JSON keys
var columnHeaders = $('<tr>'); //defining row for headers
for(var i=0;i<jsonKeys.length-1;i++){
columnHeaders.append('<th>'+jsonKeys[i]+'</th>');
}
$(table).append(columnHeaders); //appending headers to headers
var columnValues = $('<tr ng-repeat="x in filteredObject">'); //defining row for column values
for(var i=1;i<jsonKeys.length;i++){
columnValues.append('<td>{{ x.'+jsonKeys[i]+'}}</td>'); //appending column to row
}
$(table).append(columnValues); //appending row with with column values
$(parentDiv).append(dropdown);
$(parentDiv).append(table);
$(mDiv).append(parentDiv);
$('body').append(mDiv);
var currentValue="";
//defining module and controller for angular
var app = angular
.module('myApp', [])
.controller('myCtrl', function($scope) {
alert();
//getting JSON keys and data for dropdown
var jsonKeys = _.allKeys(data[0]);
var dropdownData = _.uniq(_.pluck(data,jsonKeys[0]));
//assigning array for dropdown
$scope.numbers = dropdownData;
$scope.mySelect = $scope.numbers[0]; //setting 1st value of array to dropdown
filterTableData($scope.numbers[0]);
//getting selected value of dropdown on change
$scope.showSelectValue = function(mySelect) {
currentValue = mySelect;
filterTableData(currentValue);
}
//function for filtering JSON object based on selected value in dropdown
function filterTableData(currentDropdownValue){
$scope.filteredObject = _.filter(data, function(key){ //filter function for filtering JSON data
return key.name == currentDropdownValue;
});
}
});
})
Thank you.