CODEWITHSUNDEEP
angularjsangular-ui-grid
corry
corry

Reputation: 1529

Angular UI Grid How to bind value from variable

is it possible to bind value from the $scope variable in Angular UI Grid? There is a $scope.number value which I want to bind and show in Number column:

app.controller('MainCtrl', function ($scope, $http) {
  $scope.gridOptions = { enableRowSelection: true, enableRowHeaderSelection: false };

  $scope.number = 01234567;

  $scope.gridOptions.columnDefs = [
    { field: "contactId", displayName: "CID", width: 60 },
    { field: "name", displayName: "Contact Name" },
    { field: "number", displayName: "Number", cellTemplates: '<div class="ui-grid-cell-contents"> {{row.entity.number}} </div>'}
  ];

  $scope.contacts = [];

  $http.get('contacts.json').success(function (data) {
    data.forEach( function( row, index ) {
        $scope.contacts.push(row);
    });
    $scope.gridOptions.data = data;
    console.log('data from contacts.json', data);
    });

});

I'm trying to define row.entity in CellTemplate property, but it doesn't work. plunker

Upvotes: 1

Views: 2390

Answers (1)

xphong
xphong

Reputation: 1114

You would have to add the $scope variable to your data array:

var app = angular.module('app', ['ui.grid']);

app.controller('MainCtrl', function ($scope, $http) {
  $scope.gridOptions = { enableRowSelection: true, enableRowHeaderSelection: false };
  
  $scope.number = 01234567;
  
  $scope.gridOptions.columnDefs = [
    { field: "contactId", displayName: "CID", width: 60 },
    { field: "name", displayName: "Contact Name" },
    { field: "number", displayName: "Number", cellTemplates: '<div class="ui-grid-cell-contents"> {{row.entity.number}} </div>'}
  ];
  
  $scope.contacts = [];

  $http.get('contacts.json').success(function (data) {
    data.forEach( function( row, index ) {
        row.number = $scope.number;
        $scope.contacts.push(row);
    });
    $scope.gridOptions.data = data;
    console.log('data from contacts.json', data);
	});

});

Upvotes: 1

Related Questions