AngularJS NG网 - 动态更新的列和结果 [英] AngularJS ng-grid - Dynamically updating the columns and results

查看:117
本文介绍了AngularJS NG网 - 动态更新的列和结果的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在NG-电网新手。我们如何动态地更新网格内的列和结果。

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?

先谢谢了。

推荐答案

您必须建立在你的范围列定义变化。您也可以与重新presents作用域属性的字符串定义配置属性 columnDefs 。像数据的配置,这可以让你观看的范围领域,并切换出来。

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.

下面是一个更新的Plunker

更改为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网 - 动态更新的列和结果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆