Angular js动态网格标题

这里我想根据任何用户输入值动态更新网格标题的显示名称或字段。Angular js动态网格标题

<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中有可能会像

下拉，其中有我所有的网头值。和相应的将会有一个输入框

当用户从下拉菜单中选择任何特定的网格标题时，相应的输入值被映射到该标题，并且我的网格也根据修改的标题更新。

伙计们，请帮助我，我真的会卡在角这样做的，这是对我来说真的

来源

2015-04-25 Hardik Munjaal

有没有使用NG-格，但也许修改'$ scope.gridOptions.columnDefs'阵列事情变化时，你想要什么？您可以在范围变量上执行'$ scope。$ watch'链接到下拉框并在watch callback中执行此更改？ –

在我的网格中有两个字段** 1-名称2-年龄，**现在我想显示在HTML中的下拉列表，其中包含所有字段名称的值.... NOW假设任何用户已经从下拉菜单，他希望将此值更改为名字（将有相应的下拉框的输入框）。现在我想当用户在输入框中输入名字，然后我想更新我的网格列1-名字2-年龄 –

请看下面的例子非常重要......

在这个例子中，我正在观看选择下拉列表中的更改，并观察新字段名称的更改。当名称更改时，它将使用self.gridOptions.ngGrid.buildColumns()重建ng网格列。

(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-25 14:02:02

嘿Thamks吉米，这是真棒:) –

Angular js动态网格标题

回答

相关问题