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動態網格標題

回答

相關問題