angularjs – 如何动态配置ng网格
发布时间:2020-12-17 07:38:12 所属栏目:安全 来源:网络整理
导读:我在一个 angularjs应用程序中有一个视图,其中我想允许用户在各种不同配置的网格之间进行选择.理想情况下,我想将传递给ng-grid指令的值绑定到模型变量,如下所示.但是,虽然此示例渲染了当简单字符串值传递到ng-grid(即. div class =“gridStyle”ng-grid =“g
我在一个
angularjs应用程序中有一个视图,其中我想允许用户在各种不同配置的网格之间进行选择.理想情况下,我想将传递给ng-grid指令的值绑定到模型变量,如下所示.但是,虽然此示例渲染了当简单字符串值传递到ng-grid(即.< div class =“gridStyle”ng-grid =“gridOptions1”>< / div>)时的动作配置失败的标记.
var app = angular.module('myApp',['ngGrid']); app.controller('MyCtrl',function($scope) { $scope.option; $scope.myData = [{name: "Moroni",age: 50},{name: "Tiancum",age: 43},{name: "Jacob",age: 27},{name: "Nephi",age: 29},{name: "Enos",age: 34}]; $scope.gridOptions1 = { data: 'myData',columnDefs: [{ field:"name",displayName: "NAME"},{ field:"age",displayName: "AGE"}],multiSelect: true }; $scope.gridOptions2 = { data: 'myData',displayName: "Name"},displayName: "Age"}],multiSelect: false }; }); <body ng-controller="MyCtrl"> <label>Show me:</label> <input type="radio" name="option" ng-model="option" value="gridOptions1">Grid A</input> <input type="radio" name="option" ng-model="option" value="gridOptions2">Grid B</input> <div class="gridStyle" ng-grid="{{option}}"></div> </body> 有没有人可以告诉我,如果有一种方法让ng网格动态接受不同的配置,或者是否有这个限制的解决方法?请注意,我需要重新配置网格的多个属性,而不仅仅是我认为有解决方法的columnDefs和数据属性. Plunker:http://plnkr.co/edit/mdXrq6?p=preview
如果您将columnDefs分配给$scope上的属性的字符串,然后更改数组,则可能会执行此操作:
http://plnkr.co/edit/wuob1M?p=preview;
在this issue上描述了在ng网格上提出的. JS: var app = angular.module('myApp',function($scope) { $scope.myData = [{name: "Moroni",age: 34}]; $scope.columnDefs1 = [{ field:"name",displayName: "AGE"}]; $scope.columnDefs2 = [{ field:"name",displayName: "Age"}]; $scope.gridOptions = { data: 'myData',columnDefs: 'columnDefs1',multiSelect: true }; $scope.switchColumnDefs = function() { $scope.columnDefs1 = $scope.columnDefs2; } }); HTML: <body ng-controller="MyCtrl"> <label>Show me:</label> <a ng-click="switchColumnDefs()">Switch Options</a> <div class="gridStyle" ng-grid="gridOptions"></div> </body> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |