Question

我们如何在angular.js中显示选定的列并将其复制到剪贴板？目前我正在尝试显示用户选择的列。还需要知道在这种情况下如何复制列的每个行项目：

＆＃13;

debugger;
var app = angular.module('myApp', ['ngGrid']);

app.controller('GridExampleCtrl', function($scope, $http, $timeout) {
  debugger;
  $scope.myData = [];

  $scope.grid1 = [{
    name: "grid1a",
    age: 50
  }, {
    name: "grid1b",
    age: 43
  }, {
    name: "grid1c",
    age: 50
  }, {
    name: "grid1d",
    age: 29
  }, {
    name: "grid1e",
    age: 34
  }];

  $scope.grid2 = [{
    lastname: "grid2a",
    age: 50,
    state: 'Idaho'
  }, {
    lastname: "grid2b",
    age: 43,
    state: 'NewYork'
  }, {
    lastname: "grid2c",
    age: 50,
    state: 'California'
  }, {
    lastname: "grid2d",
    age: 29,
    state: 'Arizona'
  }, {
    lastname: "grid2e",
    age: 34,
    state: 'Utah'
  }];

  $scope.gridSels = [{
    GridSelId: 1,
    GridSelName: 'Grid 1'
  }, {
    GridSelId: 2,
    GridSelName: 'Grid 2'
  }]

  debugger;
  $scope.gridOptions = {
    data: 'myData',
    enableColumnResize: true,
    showGroupPanel: true
      //pagingOptions: $scope.pagingOptions
  };

  $scope.selectedCls = function(index) {
    if ($scope.sortColumn === $scope.columnHeaders[index].Value) {
      return $scope.sortColumn;
    }
  };
  debugger;
  $scope.display = function() {
    debugger;
    console.log("User selected grid : " + $scope.gridSelectedId);
    if ($scope.gridSelectedId == 1) {
      $scope.myData = $scope.grid1;
      console.log("User selected grid : " + $scope.gridSelectedId + ", Column : " + $scope.selectedCls + " : " + " Column : " + $scope.columnHeaders[index].Value);
    } else {
      $scope.myData = $scope.grid2;
      console.log("User selected grid : " + $scope.gridSelectedId + ", Column : " + $scope.selectedCls + " : " + " Column : " + $scope.columnHeaders[index].Value);
    }
  };

});

＆＃13;

.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 400px; 
    height: 300px;
}

.green {
    background-color: green;
    color: white;
}

＆＃13;

<html ng-app="myApp">

<head lang="en">
  <meta charset="utf-8">
  <title>test</title>
  <link href="Content/ng-grid.css" rel="stylesheet" />
  <link href="Content/Style.css" rel="stylesheet" />
  <script src="Scripts/angular.min.js"></script>
  <script src="Scripts/jquery-2.1.3.js"></script>
  <script src="Gridata_refqam.js"></script>
  <script src="Scripts/angular.js"></script>
  <script src="Scripts/ng-grid.js"></script>
</head>

<body ng-controller="GridExampleCtrl">
  <div>
    Grid Selection:
    <select ng-model="gridSelectedId">
      <option ng-repeat="gridSel in gridSels" value="{{gridSel.GridSelId}}">{{gridSel.GridSelName}}</option>
    </select>

    <br />User selected: {{gridSelectedId}}
    <br>
    <hr>
    <br />Cols: {{$scope.selectedCls}}
    <br>
    <hr>
    <br />Cols2: {{$scope.sortColumn}}
    <br>
    <hr>
    <div>
      <button ng-click="display()">Display</button>
      <hr>
      <div class="gridStyle" ng-grid="gridOptions"></div>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

请找到我做的模拟用户界面以获得解决方案，希望这有助于解决问题

http://plnkr.co/edit/BEz6YSkXuT4WwZQWUh5P

＆＃13;

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.myData = [{name: "Bala", age: 25},
  					 {name: "Vinoth", age: 45},
						 {name: "Kumar", age: 51},
						 {name: "Santhosh", age: 38},
						 {name: "Praveen", age: 21}];
 
var myHeaderCellTemplate = '<div class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{cursor: col.cursor}" >'+
                               '<div ng-click="copyColumn($event,col)" ng-class="\colt\ + col.index" class="ngHeaderText">{{col.displayName}}</div>'+
                            '</div>';                     
                             
        
$scope.gridOptions = {
        data: 'myData',
        columnDefs: [{ field: 'name', displayName: 'First Name', width: 90, headerCellTemplate: myHeaderCellTemplate },
                    { field: 'age', cellClass: 'ageCell', headerClass: 'ageHeader', headerCellTemplate: myHeaderCellTemplate} ]
 };  
 
 
$scope.copyColumn = function(evt,col) {
  
 var clipBoard = '';
  for(var i=0;i< $scope.myData.length; i++){
    
    if(col.index === 0){
      clipBoard = clipBoard +' '+ $scope.myData[i].name;
    }
    else{
      clipBoard = clipBoard +' '+ $scope.myData[i].age;
    }
   
  }
 alert(clipBoard);
  
};
        
        
        
});

＆＃13;

/*style.css*/
.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 400px; 
    height: 300px
}

.green {
  background-color: green;
	color: white;
}

＆＃13;

<!DOCTYPE html>
<html ng-app="myApp">
    <head lang="en">
        <meta charset="utf-8">
        <title>Custom Plunker</title>  
        <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
        <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body ng-controller="MyCtrl">
        <div class="gridStyle" ng-grid="gridOptions"></div>
    </body>
</html>

＆＃13;

如何使用angularjs将列复制到剪贴板？

1 个答案: