Javascript 单击以AngularJS显示UI网格的特定记录_Javascript_Jquery_Angularjs

Javascript 单击以AngularJS显示UI网格的特定记录

javascript jquery angularjs

Javascript 单击以AngularJS显示UI网格的特定记录,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我使用的是AngularJS UI网格模块。我试图在单击时显示特定的记录 app.js var app = angular.module('app', ['ngAnimate','ngTouch', 'ui.grid', 'ui.grid.edit', 'ui.grid.rowEdit', 'ui.grid.cellNav', 'ui.grid.selection']); app.controller('mainCtrl', [ '$scope' ,'$log','$http','$windo

我使用的是AngularJS UI网格模块。我试图在单击时显示特定的记录

app.js

var app = angular.module('app', ['ngAnimate','ngTouch', 'ui.grid', 'ui.grid.edit', 'ui.grid.rowEdit', 'ui.grid.cellNav', 'ui.grid.selection']);

app.controller('mainCtrl', [ '$scope' ,'$log','$http','$window',function ($scope,$log,$http,$window ) {
 $http.get("https://api.myjson.com/bins/44c55").then(function(response) {$scope.names = response.data.employees;});
 $scope.rows = [{ field: 'EmployeeId' }, { field: 'EmployeeName' }, { field: 'Designation' }, { field: 'Project' }, { field: 'Location' }];
    $scope.gridOptions = { data: 'names', enableCellEdit: true ,enableGridMenu: true, enableRowSelection: true,  columnDefs: $scope.rows,enableFiltering: true,  enableSelectAll: true};
    $scope.columnDefs = [

     {name: 'EmployeeId'},
     {name: 'EmployeeName'},
     {name: 'Designation'},
     {name: 'Project'},
     {name: 'Location'}
   ];
    $scope.addNewItem=function(){
      $scope.names.push( { EmployeeId: 'Test add ', EmployeeName: 'Test add', Designation: 'Test add', Project: 'Test add', Location: 'Test add' });
    };
    $scope.removeItem=function(){
      $scope.names.pop( { EmployeeId: 'Test add ', EmployeeName: 'Test add', Designation: 'Test add', Project: 'Test add', Location: 'Test add' });
    };
    $scope.reset=function(){
        $window.location.reload();
    }
    $scope.deleteSelected = function(){
      angular.forEach($scope.gridApi.selection.getSelectedRows(), function (data, index) {
        $scope.names.splice($scope.names.lastIndexOf(data), 1);
      });
    }
    $scope.gridOptions.onRegisterApi = function(gridApi){
      //set gridApi on scope
      $scope.gridApi = gridApi;
      gridApi.selection.on.rowSelectionChanged($scope,function(row){
        var msg = 'row selected ' + row.isSelected;
        $log.log(msg);
      });

      gridApi.selection.on.rowSelectionChangedBatch($scope,function(rows){
        var msg = 'rows changed ' + rows.length;
        $log.log(msg);
      });
    };

}]);

ctr.js

var app = angular.module('app', ['ngAnimate','ngTouch', 'ui.grid', 'ui.grid.edit', 'ui.grid.rowEdit', 'ui.grid.cellNav', 'ui.grid.selection']);

app.controller('mainCtrl', [ '$scope' ,'$log','$http','$window',function ($scope,$log,$http,$window ) {
 $http.get("https://api.myjson.com/bins/44c55").then(function(response) {$scope.names = response.data.employees;});
 $scope.rows = [{ field: 'EmployeeId' }, { field: 'EmployeeName' }, { field: 'Designation' }, { field: 'Project' }, { field: 'Location' }];
    $scope.gridOptions = { data: 'names', enableCellEdit: true ,enableGridMenu: true, enableRowSelection: true,  columnDefs: $scope.rows,enableFiltering: true,  enableSelectAll: true};
    $scope.columnDefs = [

     {name: 'EmployeeId'},
     {name: 'EmployeeName'},
     {name: 'Designation'},
     {name: 'Project'},
     {name: 'Location'}
   ];
    $scope.addNewItem=function(){
      $scope.names.push( { EmployeeId: 'Test add ', EmployeeName: 'Test add', Designation: 'Test add', Project: 'Test add', Location: 'Test add' });
    };
    $scope.removeItem=function(){
      $scope.names.pop( { EmployeeId: 'Test add ', EmployeeName: 'Test add', Designation: 'Test add', Project: 'Test add', Location: 'Test add' });
    };
    $scope.reset=function(){
        $window.location.reload();
    }
    $scope.deleteSelected = function(){
      angular.forEach($scope.gridApi.selection.getSelectedRows(), function (data, index) {
        $scope.names.splice($scope.names.lastIndexOf(data), 1);
      });
    }
    $scope.gridOptions.onRegisterApi = function(gridApi){
      //set gridApi on scope
      $scope.gridApi = gridApi;
      gridApi.selection.on.rowSelectionChanged($scope,function(row){
        var msg = 'row selected ' + row.isSelected;
        $log.log(msg);
      });

      gridApi.selection.on.rowSelectionChangedBatch($scope,function(rows){
        var msg = 'rows changed ' + rows.length;
        $log.log(msg);
      });
    };

}]);

index.html

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.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>
    <link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" type="text/css">
    <script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script src="app.js"></script>
    <script src="ctrGrid.js"></script>
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>
  <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">UI Grid</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>

      </ul>
    </div>
  </div>
</nav>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div ng-controller="mainCtrl">
                        <div class="btn">

                            <button ng-click="addNewItem()"  class="btn btn-success glyphicon-plus"> ADD item</button>
                            <button ng-click="removeItem()"class="btn btn-success glyphicon-minus"  > Remove Last Item</button>
                            <button type="button"  ng-click="deleteSelected()" class="btn btn-success " > <span class="glyphicon glyphicon-remove"></span>&nbsp;Delete Selected</button>
                            <button type="button" id="reset" ng-click="reset()" class="btn btn-success " ><span class="glyphicon glyphicon-refresh"></span> &nbsp;Reset</button>
                        </div>
                        <div id="grid1" ui-grid="gridOptions " ui-grid-edit ui-grid-row-edit ui-grid-cellNav ui-grid-selection  class="grid"></div>
                </div>
            </div>
        </div>
    </div>  
    <footer class="container-fluid text-center footer">
        <p>UI Grid</p>
    </footer>
  </body>
</html>





添加项
删除最后一项
删除所选内容
重置
用户界面网格

我试着在网格中传递按钮，但它对我不起作用

我正在尝试一些类似思考的方法，但是代码太复杂了。有人能帮我吗？

检查这个。您应该首先添加jQuery：

index.html:

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

我需要查看所选行的特定记录。{name:'ShowScope'，cellTemplate:'Click Me'}]；