1

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

  <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>

现在我的要求是：-

在 HTML 中会有类似的东西

一个下拉列表，其中有我的所有网格标题值。和相应的会有一个输入框

当用户从下拉列表中选择任何特定的网格标题时，相应的输入值会映射到该标题，并且我的网格也会根据修改后的标题进行更新。

  • 伙计们请帮帮我，我真的被困在有角度的做这件事上，这对我来说真的很重要
4

1 回答 1

2

请参阅以下示例...

在示例中，我正在查看选择下拉菜单上的更改，以及对新字段名称的更改。当名称更改时，它将使用self.gridOptions.ngGrid.buildColumns().

(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>

于 2015-04-25T14:02:02.477 回答