这里我想根据任何用户输入值动态更新网格标题的显示名称或字段。
<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 中会有这样的东西
一个下拉列表，其中有我的所有网格标题值。 并且对应会有一个输入框
当用户从下拉列表中选择任何特定的网格标题时，相应的输入值将映射到该标题，并且我的网格也会根据修改后的标题进行更新。
- 伙计们请帮帮我，我真的很难在 Angular 上做这件事 这对我来说真的很重要
最佳答案
看下面的例子...
在示例中，我正在观察选择下拉菜单的变化，以及新字段名称的变化。当名称更改时，它将使用 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>关于javascript - Angular js动态网格标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29865778/