corry corry - 2 months ago 25
AngularJS Question

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

Answer

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);
	});

});