Question

我正在使用angular-filter countBy函数来分组和计算列的条目数。我想将这些值传递到同一页面上的单独条形图中。我已经尝试了很多方法但是没有办法让它发挥作用。

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>

控制器：

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}];


}]);

如果我可以将键和值从ng-repeat传递到 barData 和标签变量中控制器可能然后我可以使用barData和标签来填充条形图。那我怎么能这样做呢？

Answer 1

我终于得到了代码jsfiddle工作，它的工作正常。该代码显示了如何调用自定义筛选器功能。我希望这就是你要找的东西。还有一件事。自定义过滤器的行是这样的

$scope.barData = $filter('countBy')($scope.myData, "col_ky");

Jsfiddle： https://jsfiddle.net/Kai_Draord/p3exg6rw/9/

最终输出：

AngularJS：将值从ng-repeat传递到条形图

1 个答案: