Question

我找到了一个例子。它工作正常。我想为我的项目使用数据。

链接完整代码： https://aspdotnet-vijayprajapati-mca.blogspot.lt/2017/05/sql-server-real-time-update-on-record.html

这里是html代码：

                  <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="Scripts/angular.min.js"></script>
</head>
<body ng-app="mainApp" ng-controller="EmpCtrl">
    <h1>SqlTableDependencly with SignalR</h1>
    <div class="col-sm-6">      
        <table class="table table-bordered table-hover table-striped">
            <tr>
                <th>EmpId
                </th>
                <th>EName
                </th>
                <th>DeptNo
                </th>
            </tr>
            <tbody>
                <tr ng-repeat="item in Employees">
                    <td>{{item.EmpId}}</td>
                    <td>{{item.EName}}</td>
                    <td>{{item.DeptNo}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/jquery.signalR-2.2.2.js"></script>
    <script src="../signalr/hubs"></script>
    <script src="Scripts/app.js"></script>
</body>
</html>

现在数据返回一行：

EmpId |EName   | DeptNo 
1     | apple  | 11
2     | apple  | 12
3     | apple  | 14
4     | orange | 14
5     | orange | 15
6     | orange | 16

我需要根据EName列对其进行分组：

-----
EName : apple
-----
EmpId 1 DeptNo 11
EmpId 2 DeptNo 12
EmpId 3 DeptNo 14
-----
EName : orange
-----
EmpId 4 DeptNo 14
EmpId 5 DeptNo 15
EmpId 6 DeptNo 16

Answer 1

您可以添加angularjsfilter并使用groupBy。

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.17/angular-filter.min.js"></script>

var app = angular.module("testApp", ['ui.bootstrap', 'angular.filter']);

以下是工作示例：

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.17/angular-filter.min.js"></script>
  <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
  <script>
    (function() {

      var app = angular.module("testApp", ['ui.bootstrap', 'angular.filter']);
      app.controller('testCtrl', ['$scope', '$http', function($scope, $http) {
        $scope.datas = [{"empId":1,"name":"apple","dept":"11"},{"empId":2,"name":"apple","dept":"12"},{"empId":3,"name":"apple","dept":"14"},{"empId":4,"name":"orange","dept":"14"},{"empId":5,"name":"orange","dept":"15"},{"empId":6,"name":"orange","dept":"16"}];
      }]);

    }());
  </script>
  <style></style>
</head>

<body ng-app="testApp">
  <div ng-controller="testCtrl">
    <div ng-repeat="(key, value) in datas | groupBy: 'name'">
      <h4>EName: {{ key }}</h4>
      <div ng-repeat="emp in value">
        <span>EId: {{ emp.empId }} </span>
        <span>----</span>
        <span>EDepartment: {{ emp.dept }} </span>
      </div>
    </div>
  </div>
</body>

</html>

带有SignalR数据的angularJS如何对表行进行分组

1 个答案: