AngularJS: pass value from ng-repeat to barchart - angularjs

I am using angular-filter countBy function to group and count the number of entries for a column. I would like to pass the values from this into a separate bar-chart on the same page. I have tried a number of ways but haven't manage to get it to work.
HTML:
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-resource.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.js"></script> -->
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<script src="http://ui-grid.info/release/ui-grid.css"></script>
<script src="node_modules/angular-chart.js/node_modules/chart.js/dist/Chart.min.js"></script>
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
<script src="node_modules/angular-filter/dist/angular-filter.min.js"></script>
<!-- <script src="/js/app.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="/css/main.css" type="text/css">
<!-- <link rel="stylesheet" href="/webjars/bootstrap/3.3.6/css/bootstrap.css"> -->
</head>
<body>
<div ng-controller="myController">
<div id="grid1" ui-grid="{ data: myData }" class="grid"></div>
<div><canvas id="bar" class="chart chart-bar"chart-data="key" chart-labels="value" chart-series="series"></canvas></div>
<div><li ng-repeat="(key, value) in myData | countBy: 'col_ky'" >Column Key: {{ key }}, Number of Hits: {{ value }}</li></div>
</div>
</body>
</html>
Controller:
var app = angular.module('app',['ngTouch', 'ui.grid', 'chart.js', 'angular.filter']);
app.controller('myController',['$scope', '$http','$filter',function($scope, $http, $filter) {
$scope.barData = [];
$scope.labels = [];
$scope.myData = [{"col_ky":"75421","crt_ts":1501365031000},{"col_ky":"75421","crt_ts":1501124681000},{"col_ky":"75421","crt_ts":1501124688000},{"col_ky":"880610","crt_ts":1501127589000},{"col_ky":"880610","crt_ts":1501127715000},{"col_ky":"891733","crt_ts":1501128075000},{"col_ky":"75421","crt_ts":1501128130000},{"col_ky":"880610","crt_ts":1501128181000},{"col_ky":"75421","crt_ts":1501128192000},{"col_ky":"885110","crt_ts":1501128364000},{"col_ky":"880610","crt_ts":1501128369000},{"col_ky":"326083","crt_ts":1501130957000},{"col_ky":"75421","crt_ts":1501131142000},{"col_ky":"863184","crt_ts":1501131949000}];
}]);
If I could pass the keyand value from ng-repeat into the barData and labels vars in the controller maybe , I could then use barData and labels to populate the bar chart. So how can I do this?


I finally got the code jsfiddle working, its working fine. The code shows how to call the custom filter function. I hope this is what you are looking for. Also one more thing. The line that does the custom filter is as so
$scope.barData = $filter('countBy')($scope.myData, "col_ky");
Jsfiddle: https://jsfiddle.net/Kai_Draord/p3exg6rw/9/
Final Output:

Related

Not able to read data from Controller in Angular JS

can anyone point the mistake as to why i am unable to read the data from the controller ?
Link to plunker
Plunker
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js.1.3#*" data-semver="1.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1> {{ message }} </h1>
</body>
</html>
// Code goes here
// Code goes here
var MainController = function($scope) {
$scope.message = "Hello";
};

Where is the ng-app name ? Provide module name.
angular.module('myApp',[])
.controller('SomeCtrl',function($scope){ .. your code ...})
Provide it in .html file
<html ng-app="myApp">
Fixed your Plunkr
You are referring to older version of AngularJS for learning and using 1.5 in plunkr. Check the below link
For your app, refer
this link
and this one too

While your code may be correct, but it is prior to the versions 1.3.0
Versions Before 1.3.0:
Prior to 1.3.0, angular was able to automatically discover controllers
that were defined globally.
Check Below I have created without module
<div ng-app>
<div ng-controller="MainController">
{{message}}
</div>
</div>
The code can be:
var MainController = function($scope) {
$scope.message = "Hello";
};
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.32/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}} </h1>
</body>
</html>
Plunker version prior to 1.3.0
Versions After 1.3.0:
You can use $controllerProvider.allowGlobals() to enable that behaviour.
allowGlobals allows $controller to find controller constructors on
window
angular.module("ng").config(function($controllerProvider){
$controllerProvider.allowGlobals();
});
var MainController = function($scope) {
$scope.message = "Hello";
};
<!DOCTYPE html>
<html ng-app>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="script.js"></script>
<script type="text/javascript">
function MyController() {}
</script>
</head>
<body ng-controller="MainController">
<h1>{{message}} </h1>
</body>
</html>
Plunker with versions after 1.3.0
Note: I personally recommend to use the latest versions with modules
and ng-app="app" format.
angular.module('myApp',[])
.controller('MainController',function($scope){ .. your code ...})

Here you go!!
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js.1.3#*" data-semver="1.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1> {{ message }} </h1>
</body>
</html>
// Code goes here
script.js
angular.module('app',[]).controller('MainController',function MainController($scope) {
$scope.message = "Hello";
})

Chosen JS not working with Angular JS Repeat

I trying to include chosen js library in to my project where i use select html tag. Its working with simple selection list, but when i try to populate list using angular js ng-repeat , its not working. Please help me where i gone wrong. below is my code.
<html>
<head>
<title></title>
<link rel="stylesheet" href="docsupport/style.css">
<link rel="stylesheet" href="docsupport/prism.css">
<link rel="stylesheet" href="chosen.css">
</head>
<body ng-app="testapp" ng-controller = "testController">
<select chosen class="chosen-select" ng-options = "cust.CustName for cust in customers">
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js" type="text/javascript"></script>
<script src="chosen.jquery.js" type="text/javascript"></script>
<script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
<script src="docsupport/init.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script>
<script type="text/javascript">
var app = angular.module('testapp', []);
app.controller('testController',['$scope','$http', function($scope,$http)
{
$http.get("php/getCustomerList.php")
.then (function(response)
{
$scope.customers = response.data;
});
}]);
</script>
</body>
</html>

I think you have to use ng-model with ng-options in your select tag.
Try like below code:
<select chosen class="chosen-select" ng-model="mySelectBox" ng-options = "cust.CustName for cust in customers">
You can check my running snippet here. I removed your api call and enter value manually
<html>
<head>
<title></title>
<link rel="stylesheet" href="docsupport/style.css">
<link rel="stylesheet" href="docsupport/prism.css">
<link rel="stylesheet" href="chosen.css">
</head>
<body ng-app="testapp" ng-controller = "testController">
<select chosen class="chosen-select" ng-model="mySelect" ng-options = "cust.CustName for cust in customers">
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js" type="text/javascript"></script>
<script src="chosen.jquery.js" type="text/javascript"></script>
<script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
<script src="docsupport/init.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script>
<script type="text/javascript">
var app = angular.module('testapp', []);
app.controller('testController',['$scope','$http', function($scope,$http)
{
$scope.customers = [{'CustName':'Angular'},{'CustName':'JavaScript'},{'CustName':'Java'}];
}]);
</script>
</body>
</html>

my angular js is not working after i identifiy something in my ng-app

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title> Angular JavaScript! </title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<div class="container">
<input class="form-control" ng-model="Firstname" />
{{Firstname}}
</div> <!-- container -->
</body>
</html>
my script.js
var app = angular.module('myApp'. []);
app.controller('myCtrl', function($scope){
$scope.Firstname = "guidy";
$scope.Lastname = "manson";
})
I've been trying to find a for solution for this for hours and I just can't find any.
My problem is that the data binding suddenly isn't working after I put ng-app="myApp" in my Html tag. However, when I put it this way: ng-app="", the data binding is already working. Can you guys figure out why angularjs data-binding is not working after I put or identify "myApp" in my ng-app?

var app = angular.module('myApp'. []);
This should have a comma and not a dot
var app = angular.module('myApp', []);
Also add ng-controller="myCtrl" to your view

you should add ng-controller directive to your view.
<body ng-controller="myCtrl">
<div class="container">
<input class="form-control" ng-model="Firstname" />
{{Firstname}}
</div> <!-- container -->
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>

unable to get the index of the selected item in AngularJs

I have a drop down with values which I am using a drop box to display the items. I want to handle the click event and print the index of the element in the array. The view code is as below:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link data-require="font-awesome#4.5.0" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
<script data-require="jquery#*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="bootstrap#*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myController">
<select ng-options="item for item in items" ng-model="item" ng-change="handleClick($index)">
</select>
</html>
On the controller I have the function but I am not getting the index on selecting.
// Code goes here
angular.module("myApp", []).
controller("myController", function($scope){
$scope.handleClick = function(index){
console.log("came inside the handleClick function with the currext index "+index);
}
$scope.items=["pradeep","praveen", "sagar","vinod"];
})
Please let me know where I am going wrong. link to Plunkr - Link to Plnkr

$index isn't defined when using ngOptions - your best bet is to use indexOf and find the index:
<select ng-options="item for item in items" ng-model="selectedItem" ng-change="handleClick(selectedItem)">
And the JS:
$scope.handleClick = function(selectedItem) {
var index = $scope.items.indexOf(selectedItem);
}

Error using module in angularJS

I am new to angular.js and have a problem. Please help me resolve it.
I have created a simple screen using a controller and a module in my example.
But it doesnt work. I have presented the example as follows :
My html file is :-
<!doctype html>
<html ng-app="ayan">
<head>
<script type="text/javascript" src="hotel_listing_angular.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<div ng-controller="myController">
<ul>
<li ng-repeat="contact in htlList">
{{ contact.name }}
</li>
</ul>
</div>
</body>
</html>
and my js file is as follows :-
var ayan=angular.module('ayan',[]);
ayan.controller('myController',function ($scope) {
$scope.htlList = [
{name:"Picard", description:"Captain"},
{name:"Santosh", description:"Programmer"},
{name:"Amit", description:"Manager"}
];
});
Please tell me what am I doing wrong.

You need to include
<script type="text/javascript" src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
before
<script type="text/javascript" src="hotel_listing_angular.js"></script>

Try calling
<script type="text/javascript" src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
before calling
<script type="text/javascript" src="hotel_listing_angular.js"></script>

Resources