I am a beginner of AngularJS. I study the demo of ng-grid and have a question.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
<div class="selectedItems">{{mySelections}}</div><br><br>
</body>
</html>
app.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.mySelections = [];
$scope.myData = [{name: "Moroni", id: 1},
{name: "Tiancum", id: 2},
{name: "Jacob", id: 3},
{name: "Nephi", id: 4},
{name: "Akon", id: 5},
{name: "Enos", id: 6}];
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.mySelections,
multiSelect: true
};
//$scope.mySelections_id = $scope.mySelections.length;
});
When I select the first row, the div of selectedItems will show [{"name":"Moroni","id":1}]. the result is OK. If I just want to get the value of cell [id] from selected row, how do I modify my code?
here is Plunker
Use the afterSelectionChange callback to extract the ids from the selection to an other array.
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.mySelections,
multiSelect: true,
afterSelectionChange: function () {
$scope.selectedIDs = [];
angular.forEach($scope.mySelections, function ( item ) {
$scope.selectedIDs.push( item.id )
});
}
};
now you can reference {{selectedIDs}} from the template and has all the selected ids in it. Or just the first: {{selectedIDs[0]}}
See the working example here: http://plnkr.co/edit/xVwVWX
You can access the rowItem of the selected row with the arguments to the afterSelectionChange event. The entity property will have the id and name properties.
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.mySelections,
multiSelect: true,
afterSelectionChange: function (theRow, evt) {
alert(theRow.entity.id);
}
};
Acutally, I want to get a cell value and modify when user selects the cell at the table.
Above answers are using fixed columns's filed.. like
$scope.selectedIDs.push( item.id ) // id is column filed
Instead of these answers, I found another way exactly what I want to achieve with.
Example code:
http://plnkr.co/edit/wfiMhlJ7by4eUHojjKT4?p=preview
editableCellTemplate which is an option for columnDefs is used for solving this problem.
Angular is Aswome!!
Related
I have a situation where there are 3 check box ("initially checked"). Since it as 3 check box it will use ng-repeat for 3 time and loops the division for there time. Now once i uncheck any of the check box it should display div for 2 time. So far ,
$scope.items = [
{id: 0, title: "apple",selected:true},
{id: 1, title: "orange",selected:true},
{id: 2, title: "grapes",selected:true},
];
On ng-click in each check box i have called a function test("apple").
$scope.test = function(vals) {
$scope.vl=[];
for(var i=0;i<$scope.items.length;i++) {
if($scope.items[i].title == vals) {
console.log("dnt push");
}
else {
$scope.vl.push({
id: $scope.items[i].id,
title: $scope.items[i].title,
selected:true
});
}
}
console.log("vl array");
console.log($scope.vl);
}
Problem I am facing is it works fine for 1st uncheck but not when i do for multiple uncheck. When i check unchecked its not loading div.
In HTML I am using like,
<div ng-repeat="item in vl"> some tags </div>
not quite sure about your question, but hope my answer can give you some hints.
plunker demo
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.items = [{
id: 0,
title: "apple",
selected: true
}, {
id: 1,
title: "orange",
selected: true
}, {
id: 2,
title: "grapes",
selected: true
}];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div ng-repeat="item in items">
<input type="checkbox" ng-model="item.selected">{{item.title}}
</div>
{{items | json}}
</body>
</html>
If and only if you want to put in an array the item who are checked :
http://plnkr.co/edit/DvoPBBvKf3AhYM4qcBhx?p=preview
html
<div ng-repeat="item in items">
<input type="checkbox"
ng-model="item.selected" ng-click="test(item.title)"> {{item.title}}
</div>
controller
$scope.test = function(vals) {
$scope.vl=[];
$scope.vlChecked=[];
for(var i=0;i<$scope.items.length;i++) {
if($scope.items[i].selected) {
$scope.vlChecked.push({
id: $scope.items[i].id,
title: $scope.items[i].title,
selected:true
});
}
}
console.log("vlChecked array");
console.log(JSON.stringify($scope.vlChecked));
}
This is my code
var app = angular.module('app', ['ui.grid']);
app.controller('TableCrtl', ['$scope', '$filter', function ($scope, $filter) {
var myDummyData = [{name: "Moroni",address:"one", age: 50},
{name: "Tiancum",address:"vij", age: 43},
{name: "Jacob",address:"dfr", age: 27},
{name: "Nephi",address:"mnc", age: 29},
{name: "Enos",address:"trr", age: 34}];
$scope.filterOptions = {
filterText: ''
};
$scope.gridOpts = {
data: myDummyData,
// enableFiltering: true,
columnDefs: [
{name: 'Name', field: 'name', enableFiltering: true},
{name: 'Address', field: 'address', enableFiltering: true}
]
};
$scope.refreshData = function() {
$scope.gridOpts.data = $filter('filter')(myDummyData, $scope.searchText, undefined);
};
}]);
/* Styles go here */
.cart-item.ng-enter {
-webkit-transition:0.5s linear all;
transition:0.5s linear all;
background-color: yellow;
}
.cart-item.ng-enter-active {
background-color: white;
}
.myGrid {
width: 1200px;
height: 800px;
}
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link data-require="bootstrap-css" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="bootstrap#*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://github.com/danielcrisp/angular-rangeslider/blob/master/angular.rangeSlider.css" rel="stylesheet" type="text/css"/>
<script src="https://github.com/danielcrisp/angular-rangeslider/blob/master/angular.rangeSlider.js" type="text/javascript"></script>
</head>
<body ng-controller="TableCrtl">
<div>
<br>
<br>
<input type="text" class="form-control" ng-change="refreshData()" placeholder="Produkt Name" ng-model="searchText">
<br>
<div range-slider min="0" max="100" model-min="15" model-max="35"></div>
<br>
<div id="grid1" ui-grid="gridOpts" class="grid"></div>
</div>
<script src="script.js"></script>
</body>
</html>
This is my plunker :- http://plnkr.co/edit/qmVtzQLiZVZKyQCQSApT?p=preview
In the above code i have 3 columns data , but i want to display two columns in ui-grid. when i search text entire data filterd,but i want to filter display data like (name and address only) in ui-grid.i tried the following code
$scope.refreshData = function() {
$scope.gridOpts.data = $filter('filter')(myDummyData.name, $scope.searchText, undefined);
};
May be this is what you are looking for.
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
var today = new Date();
$scope.gridOptions = {
enableFiltering: false,
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
$scope.gridApi.grid.registerRowsProcessor( $scope.singleFilter, 200 );
},
columnDefs: [
{ field: 'name' },
{ field: 'address' }
]
};
$scope.filter = function() {
$scope.gridApi.grid.refresh();
};
$scope.singleFilter = function( renderableRows ){
var matcher = new RegExp($scope.filterValue);
renderableRows.forEach( function( row ) {
var match = false;
[ 'name', 'address'].forEach(function( field ){
if ( row.entity[field].match(matcher) ){
match = true;
}
});
if ( !match ){
row.visible = false;
}
});
return renderableRows;
};
}])
});
The code is copied from this link. The
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
$scope.gridApi.grid.registerRowsProcessor( $scope.singleFilter, 200 );
}
and "$scope.singleFilter" is the main thing you need to look.
Instead of using the default filter, define a custom filter which filters based on the name and address only. Here is the basic logic.
Filter:
app.filter('customfilter', function () {
//Your logic to filter based on name and address
});
Controller:
Inject filter in the controller and use it.
$scope.refreshData = function() {
$scope.gridOpts.data = $filter('customfilter')(arguments for filter);
};
here i want to get the hyperlink value ( in my case data in json object) ie 6 and 7 in hyperlink format. I have converted the cell template but i m not able to get the value of json in the grid. i get "link" as text not its value
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>var app = angular.module('myApp', ['ngGrid']);
main.js
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "Moroni", age: 50, link: 6},
{name: "Tiancum", age: 43, link: 7},
];
$scope.gridOptions = {
data: 'myData',
columnDefs: [{ field: 'name', displayName: 'Name' },
{ field: 'age', displayName: 'Age' },
{ field: 'link', displayName: 'Link',
cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()">link</div>'
}]
};
});
Give a name to your links:
$scope.myData = [{
name: "Moroni",
age: 50,
link: "http://www.google.com",
linkname: "Google"
}, {
name: "Tiancum",
age: 43,
link: "http://www.stackoverflow.com",
linkname: "Help me!"
}, ];
Then use this celltemplate:
cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a target="_blank" href="{{row.getProperty(col.field)}}">{{row.entity.linkname}}</a></div>'
Have a look at this Plunker with the full code
Or, if you can not add a field to your json try this template:
cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a target="_blank" href="{{row.getProperty(col.field)}}">{{row.entity.link}}</a></div>'
Change your template to this:
<div class="ngCellText" ng-class="col.colIndex()">{{ col.link }}</div>
I have grid display in html and above the grid I have drop down list.
I have to sort the data of the grid view dynamically based on drop down list selected item. In grid one of filed is invisible.
Here is my working plunker:
http://plnkr.co/edit/1iJ7HVcv4CyMzNKUXHTi?p=preview
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<br><br>
<span class=""><br/>
<select ng-model="name" ng-options="name.name for name in names">
<option value="">---- SELECT ----</option>
</select>
</span><br/>
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>
main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.names = [
{name:' NAME A – Z ', shade:'dark'},
{name:' NAME Z – A ', shade:'light'},
{name:' ID LOW TO HIGH', shade:'dark'},
{name:' ID HIGH TO LOW', shade:'dark'}
];
$scope.myData = [{name: "Moroni", age: 50,id:1},
{name: "Tiancum", age: 43,id:2},
{name: "Jacob", age: 27,id:3},
{name: "Nephi", age: 29,id:4},
{name: "Enos", age: 34,id:5}];
$scope.gridOptions = { data: 'myData' ,
columnDefs: [
{field: 'name', displayName: 'Name'},
{field:'age', displayName:'Age'},
{field:'id', displayName:'Id', visible:false}
]
};
});
You can do it like this:
Add an ng-change to your select:
<select ng-change="sort()" ng-model="name" ng-options="name.name for name in names">
Add some information to your model about what your select options mean:
$scope.names = [
{name:' NAME A – Z ', shade:'dark', col: 'name', dir: 'asc'},
{name:' NAME Z – A ', shade:'light', col: 'name', dir: 'desc'},
{name:' ID LOW TO HIGH', shade:'dark', col: 'id', dir: 'asc'},
{name:' ID HIGH TO LOW', shade:'dark', col: 'id', dir: 'desc'}
];
And tell ng-grid what it is supposed to do:
$scope.sort = function(){
$scope.gridOptions.sortInfo = {fields:[$scope.name.col],directions:[$scope.name.dir]};
$scope.gridOptions.sortBy($scope.name.col);
}
Updated plunker:
http://plnkr.co/edit/yP4nK6wgmD3picuz3ZIf?p=preview
I'm going to turn a REST dataset into an ng-grid component. I'm using the basic demo which ships with ng-grid component but using an $http.get to populate the grid:
<html ng-app="myApp">
<head>
<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.9.1.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="ng-grid-2.0.7.min.js"></script>
<script language="javascript">
var app = angular.module('myApp', ['ngGrid']);
app.controller('Hello', function($scope, $http) {
$http.get('http://server/json').
success(function(data) {
$scope.myData = data;
});
});
$scope.gridOptions = {
data: 'myData',
enableRowSelection: false,
enableCellEditOnFocus: true,
multiSelect: false,
columnDefs: [
{ field: 'name', displayName: 'name', enableCellEdit: false } ,
{ field: 'surname', displayName: 'surname', enableCellEdit: false }
]
};
});
</script>
</head>
<body ng-controller="Hello">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>
I've tried the above code, however the REST service is not invoked and the grid is displayed as a blank div. I've tried with several variations of the $http.get method with no luck.
Any help ?
Thanks!
Your gridOptions seem to be set outside the controller. Move it inside and it should work.
You need to change
http://server/json
to the endpoint you're calling to actually get the data. ://server/json is just a placeholder for your actual endpoint. The div is empty because there's no data there.