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>

今私の要件は次のとおりです。

IN HTML 次のようなものがあります

すべてのグリッド ヘッダーの値があるドロップダウン。対応する入力ボックスがあります

ユーザーがドロップダウンから特定のグリッド ヘッダーを選択すると、対応する入力値がそのヘッダーにマップされ、変更されたヘッダーに従ってグリッドも更新されます。

  • みんな私を助けてください、私は角度でこれを行うことに本当に行き詰まっており、これは私にとって本当に非常に重要です
4

1 に答える 1

2

次の例を参照してください...

この例では、選択ドロップダウンの変更と、新しいフィールド名の変更を監視しています。名前が変更されると、 を使用して ng-grid 列が再構築されます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 に答える