Angular js 动态网格 Header

Question

这里我想根据任何用户输入值动态更新网格 headers 的显示名称或字段。

  <html ng-app="myApp">  
    <head lang="en">
     <meta charset="utf-8">
    <title>Getting Started With ngGrid Example</title>  
   <link rel="stylesheet" type="text/css" href="ng-grid.css" />
   <link rel="stylesheet" type="text/css" href="style.css" />
   <script type="text/javascript" src="jquery-1.8.2.js"></script>
   <script type="text/javascript" src="angular.js"></script>
   <script type="text/javascript" src="ng-grid-1.3.2.js"></script>

 <script type="text/javascript">
   var app = angular.module('myApp', ['ngGrid']);
  app.controller('MyCtrl', function($scope) {
 $scope.myData = [{name: "Moroni", age: 50},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34}];
   $scope.gridOptions = { 
    data: 'myData',
       columnDefs: [{field: 'name', displayName: 'Name'},
                 {field:'age', displayName:'Age', cellTemplate: '<div ng-class="{red: row.getProperty(col.field) > 40}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div>'}]
    };
  });
      </script>
         </head>
<body ng-controller="MyCtrl">
   <div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>

现在我的要求是：-

IN HTML 会有类似

的东西

一个下拉列表，其中有我的所有网格 Headers 值。 AND对应会有一个输入框

当用户 select 任何特定的网格 header 从下拉列表中，相应的输入值被映射到那个 header ，我的网格也根据修改后的 header.

伙计们请帮助我，我真的很难做到 angular 这对我来说真的很重要

Answer 1

看下面的例子...

在示例中，我正在观察 select 下拉列表的变化，以及新字段名称的变化。当名称更改时，它将使用 self.gridOptions.ngGrid.buildColumns().

重建 ng-grid 列

(function() {
  'use strict';

  angular.module('myApp', ['ngGrid']);
  
  angular.module('myApp')
    .controller('myCtrl', myCtrl);
  
  myCtrl.$inject = ['$scope', '$log'];
  function myCtrl($scope, $log) {
    var self = this;
    self.myData = [
      {name: "Moroni", age: 50},
      {name: "Tiancum", age: 43},
      {name: "Jacob", age: 27},
      {name: "Nephi", age: 29},
      {name: "Enos", age: 34}
    ];
   
    self.selectedColumn = null;
    self.selectedFieldName = null;
    
    $scope.$watch(function() { return self.selectedColumn; },
      function(newValue, oldValue) {
        $log.info(oldValue, newValue);
        self.selectedFieldName = newValue.displayName;
      }
    );
    
    $scope.$watch(function() { return self.selectedFieldName; },
      function(newValue, oldValue) {
        self.selectedColumn.displayName = newValue;
        self.gridOptions.ngGrid.buildColumns();
      }
    );

    self.columnDefs =  [
        {field: 'name', displayName: 'Name'},
        {field:'age', displayName:'Age', cellTemplate: '<div ng-class="{red: row.getProperty(col.field) > 40}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div>'}
      ];
    
    $scope["vm"] = self;
    
    self.gridOptions = { 
      data: 'vm.myData',
      columnDefs: self.columnDefs
    };
  }

}());

.gridStyle {
    border: 1px solid rgb(212,212,212);
    height: 300px
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.debug.js"></script>

<div ng-app="myApp" ng-controller="myCtrl as vm">
  <select ng-options="column.field for column in vm.columnDefs" ng-model="vm.selectedColumn"></select>  
  <input type="text" ng-model="vm.selectedFieldName">
  
  <div class="gridStyle" ng-grid="vm.gridOptions"></div>
</div>

Angular js 动态网格 Header

Angular js Dynamic Grid Header

javascript

jquery

angularjs

ng-grid

ng-bind