AngularJS ng-grid - 动态更新列和结果 [英] AngularJS ng-grid - Dynamically updating the columns and results
问题描述
我是 ng-grid 的新手.我们如何动态更新网格内的列和结果.
I am newbie in ng-grid. How do we dynamically update the columns and results inside the grid.
我创建了一个 http://plnkr.co/edit/CwUVIzSKVNCMTgpOW87f?p=preview
脚本
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'}]
};
$scope.update_columns = function($event){ console.log("asd")
$scope.myData = [{new_name: "Moroni", new_age: 50, pin: 123},
{new_name: "Tiancum", new_age: 43, pin: 345},
{new_name: "Jacob", new_age: 27, pin: 567},
{new_name: "Nephi", new_age: 29, pin: 789},
{new_name: "Enos", new_age: 34, pin: 012}
];
$scope.gridOptions.columnDefs = [
{field: 'new_name', displayName: 'New Name'},
{field:'new_age', displayName:'New Age'},
{field:'pin', displayName:'Pin'}
];
} });
在页面加载时,网格将显示一组结果,单击更改列时,我们需要更新结果和列.我现在实施的方式没有按预期工作.我做错了什么吗?
On page load, the grid will display a set of result and on clicking the change columns, we need to update the results and columns. The way I have implemented right now is not working as expected. Am i doing something wrong?
提前致谢.
推荐答案
您必须在范围内设置列定义变体.您还可以使用表示范围属性的字符串定义配置属性 columnDefs
.和data
的配置一样,这让你可以观察范围字段并将其切换出来.
You must set up your column definition variations on the scope. You can also define the configuration property columnDefs
with a string that represents a scope property. Like the configuration of data
, this allows you to watch the scope field and switch it out.
对 js 的更改:
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.columns1 = [{field: 'name', displayName: 'Name'}, {field:'age', displayName:'Age'}];
$scope.columns2 = [{field: 'new_name', displayName: 'New Name'}, {field:'new_age', displayName:'New Age'},{field:'pin', displayName:'Pin'}];
$scope.columnsSelected = $scope.columns1;
$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: 'columnsSelected'
};
$scope.update_columns = function($event) {
$scope.columnsSelected = $scope.columns2;
$scope.myData = [{new_name: "Moroni", new_age: 50, pin: 123},
{new_name: "Tiancum", new_age: 43, pin: 345},
{new_name: "Jacob", new_age: 27, pin: 567},
{new_name: "Nephi", new_age: 29, pin: 789},
{new_name: "Enos", new_age: 34, pin: 012}
];
}
});
这篇关于AngularJS ng-grid - 动态更新列和结果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!