Angular js Dynamic Grid Header

Здесь я хочу динамически обновлять отображаемое имя или поле заголовков сетки в соответствии с любым пользовательским значением ввода.Angular js Dynamic Grid Header

<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 Там будет что-то вроде

раскрывающихся, в котором есть мое значение Всех сеток заголовков. ANd Соответствующий был бы поле ввода

Когда пользователь выбирает какой-либо конкретный заголовок сетки из выпадающего списка, то соответствующее входное значение сопоставляется с этим заголовком, а моя сетка также обновляется в соответствии с измененным заголовком.

Ребята, пожалуйста, помогите мне, я действительно застревают в этом в угловом , и это действительно очень важно для меня

источник

2015-04-25 Hardik Munjaal

Не использовать нг-сетку, но, возможно, модифицируя '$ scope.gridOptions.columnDefs' массива при изменении вещь является то, что вы хотите? Вы можете использовать '$ scope. $ Watch' для переменной области, связанной с выпадающим списком, и выполнять эти изменения в обратном вызове часов? –

В моей сетке есть два поля ** 1- name 2- age, ** Теперь я хочу показать выпадающее меню в html, которое содержит значение всего имени поля .... NOw предположим, что любой пользователь выбрал имя из и он хочет изменить это значение на Firstname (будет поле ввода, соответствующее раскрывающимся спискам). Теперь я хочу, когда пользователь вводит Firstname в поле ввода, тогда я хочу обновить столбцы сетки до 1-го числа. 2- age –

Смотрите следующий пример ...

В примере , Я просматриваю изменения в раскрывающемся списке, а также просматриваю изменения в новом имени поля. Когда имя изменится, он перестроит столбец ng-grid, используя self.gridOptions.ngGrid.buildColumns().

(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 Jimmy, Это было потрясающе :) –

ответ

Смежные вопросы