This is my code
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pagination']);
app.controller('MainCtrl', [
'$scope', '$http', 'uiGridConstants', function($scope, $http, uiGridConstants) {
var paginationOptions = {
pageNumber: 1,
pageSize: 25,
sort: null
};
$scope.gridOptions = {
paginationPageSizes: [25, 50, 75],
paginationPageSize: 25,
useExternalPagination: true,
useExternalSorting: true,
columnDefs: [
{ name: 'name' },
{ name: 'gender', enableSorting: false },
{ name: 'company', enableSorting: false }
],
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.core.on.sortChanged($scope, function(grid, sortColumns) {
if (sortColumns.length == 0) {
paginationOptions.sort = null;
} else {
paginationOptions.sort = sortColumns[0].sort.direction;
}
getPage();
});
gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
paginationOptions.pageNumber = newPage;
paginationOptions.pageSize = pageSize;
getPage();
});
}
};
var getPage = function() {
var url;
switch(paginationOptions.sort) {
case uiGridConstants.ASC:
url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100_ASC.json';
break;
case uiGridConstants.DESC:
url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100_DESC.json';
break;
default:
url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json';
break;
}
$http.get(url)
.success(function (data) {
$scope.gridOptions.totalItems = 100;
var firstRow = (paginationOptions.pageNumber - 1) * paginationOptions.pageSize;
$scope.gridOptions.data = data.slice(firstRow, firstRow + paginationOptions.pageSize);
});
};
getPage();
}
]);
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.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.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" ui-grid-pagination class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
In the above code pagination is displayed on ui-grid. but i want to display pagination outside the ui-grid and if data is less than 10 disable pagination.
This is my plunker http://plnkr.co/edit/XD06tjcTQsg6YiWpjRsN?p=preview
To use a custom pagination outside the grid, set enablePaginationControls: false in its gridOptions.
$scope.gridOptions = {
data: 'data',
totalItems: $scope.data.length,
paginationPageSize: 10,
enablePaginationControls: false,
paginationCurrentPage: 1,
columnDefs: [
{name: 'name'},
{name: 'car'}
]
}
You can then create your custom pagination directive (or use Bootstrap pagination directive), and bind paginationCurrentPage property to it.
Here is a Plunker with live demo that uses external Bootstrap pagination directive.
I was able to create my own pagination for angular-ui-grid by utilizing the publicApi and gridApi functions
Below is my HTML, and below that is my javascript.
<div>
<button ng-disabled="videoListPaginationOptions.pageNumber === 1"
ng-click="videoListGridApi.pagination.seek(1)"
ng-class="{'cancelCursor':videoListPaginationOptions.pageNumber === 1}"
role="menuitem" type="button" title="Page to first" aria-label="Page to first"
>
<i class="fa fa-step-backward "></i>
</button>
<button
ng-disabled="videoListPaginationOptions.pageNumber === 1"
ng-class="{'cancelCursor':videoListPaginationOptions.pageNumber === 1}"
ng-click="videoListGridApi.pagination.previousPage()"
role="menuitem" type="button" title="Previous Page" aria-label="Previous Page">
<i class="fa fa-play fa-rotate-180 "></i>
</button>
<input ng-model="videoListPaginationOptions.pageNumber"
ng-change="seekPage('videoList',videoListPaginationOptions.pageNumber)"
class="ui-grid-pager-control-input" type="text" width="50px"/> / {{ videoListGridApi.pagination.getTotalPages() }}
<button role="menuitem" type="button" title="Next Page" aria-label="Next Page"
ng-click="videoListGridApi.pagination.nextPage()"
>
<i class="fa fa-play "></i>
</button>
<button
ng-disabled="videoListGridApi.pagination.pageNumber === videoListGridApi.pagination.getTotalPages()"
ng-click="videoListGridApi.pagination.seek(videoListGridApi.pagination.getTotalPages())"
role="menuitem" type="button" title="Page to last" aria-label="Page to last">
<i class="fa fa-step-forward "></i>
</button>
</div>
Please note that I created a scope variable called videoListGridApi, which I populate when I register my grid api on the onRegisterApi event:
scope.videoListGridOptions = {
data: 'data',
paginationPageSizes: [5, 10, 25, 50],
paginationPageSize: 5,
enableFullRowSelection: false,
enableSelectAll: true,
enableRowHeaderSelection: true,
useExternalPagination: true,
columnDefs: videoListColDefs,
onRegisterApi: function (gridApi) {
scope.videoListGridApi = gridApi;
}
}
How I replicated the Icons
In my example, you can see that I use font-awesome icons to replicate the
icons in the ui-grid pagination.
I also added another class called fa-rotate-180 to get a backwards play button:
.fa-rotate-180 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
My Seek Page function is as follows:
(By the way, I have multiple tables in different tabs, so ignore the switch statement)
scope.seekPage = function(tab,page){
switch (scope.currentTab) {
case "videoList":
scope.videoListGridApi.pagination.seek(parseInt(page));
break;
case "zeroTags":
scope.videoListGridApi.pagination.seek(parseInt(page));
break;
case "duplicates":
scope.videoListGridApi.pagination.seek(parseInt(page));
break;
}
}
I hope this helps u!
Related
I have the following difficulty.
At the time of displaying the data with ng-repeat it does not show me any results.
you can see my code in CodePen
<link rel="stylesheet" href="http://jtblin.github.io/angular-chart.js/node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="http://jtblin.github.io/angular-chart.js/node_modules/angular/angular.min.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/node_modules/chart.js/dist/Chart.min.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/dist/angular-chart.js"></script>
<script>
var app = angular.module("RodoApp", ["chart.js"]);
app.controller("ChartController", function ($scope, $http) {
$scope.person = [
{
"name": "Rodrigo",
"number": 5,
},
{
"name": "Carlos",
"number": 11,
},
{
"name": "Arnold",
"number": 20,
}
];
$scope.labels = [];
$scope.data = [];
for (i = 0; i < $scope.person.length; i++) {
$scope.labels.push($scope.person[i].name);
$scope.data.push($scope.person[i].number);
}
$scope.options = {
legend: {
display: true,
},
title: {
display: true,
text: 'title'
} };
});
</script>
<body ng-app="RodoApp" ng-controller="ChartController">
<div ng-repeat="t in person">
<div>{{t.name}} - {{t.number}}</div>
</div>
<hr />
<div ng-repeat="options in person">
<canvas id="{{options.name}}" class="chart chart-pie" chart-options="options" chart-data="options.data" chart-labels="options.labels" />
</div>
</body>
EXAMPLE
RESULT
I need to count the IdSurveyQuestionAnswer to assign to their respective IdSurveyQuestion
There's a few issues with the code that you've posted. The key ones that I see that will get the chart rendering happening are as follows:
First, your ng-repeat is using options, but you also have a scope variable called options, and I think they are clashing (or at the very least, not doing what you think they are doing).
Changing $scope.options = {...} to $scope.chartOptions = {...}, and chart-options="options" to chart-options="chartOptions" will fix this.
Second, your ng-repeat is looking for chart-data and chart-labels inside each person. You've only defined name and number, so there is no data to display.
On this, I can see that you've iterated over the person array and dropped all the information into a scope data and labels array.
That means that while you are rendering a chart per person, you're effectively rendering the same chart each time.
A full working version follows:
<link rel="stylesheet" href="http://jtblin.github.io/angular-chart.js/node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="http://jtblin.github.io/angular-chart.js/node_modules/angular/angular.min.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/node_modules/chart.js/dist/Chart.min.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/dist/angular-chart.js"></script>
<script>
var app = angular.module("RodoApp", ["chart.js"]);
app.controller("ChartController", function ($scope, $http) {
$scope.person = [
{
"name": "Rodrigo",
"number": 5,
},
{
"name": "Carlos",
"number": 11,
},
{
"name": "Arnold",
"number": 20,
}
];
$scope.labels = [];
$scope.data = [];
for (i = 0; i < $scope.person.length; i++) {
$scope.labels.push($scope.person[i].name);
$scope.data.push($scope.person[i].number);
}
$scope.chartOptions = {
legend: {
display: true,
},
title: {
display: true,
text: 'title'
}
};
});
</script>
<body ng-app="RodoApp" ng-controller="ChartController">
<div ng-repeat="t in person">
<div>{{t.name}} - {{t.number}}</div>
</div>
<hr />
<div ng-repeat="options in person track by $index">
<canvas ng-attr-id="{{options.name}}" class="chart chart-pie" chart-options="chartOptions" chart-data="data" chart-labels="labels" />
</div>
</body>
While this renders the charts, the make up of the data and why you want to repeat this is something that you'll need to think about, and possible ask another question on.
I just need ** only data and title must be increase their font size** when I changed the switch statement but i dont want to increase size of font size of right corner how can i do that
<!DOCTYPE html>
<html ng-app="myApp">
<head>
***emphasized text***
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="angular-gridster.min.css"></link>
<link rel="stylesheet" href="wid.css"></link>
</head>
<body ng-controller="myController" >
<div gridster ng-controller="myCtrl" >
<ul>
<li gridster-item="item" ng-repeat="item in Items">
<div my-widget ></div>
</li>
</ul>
</div>
<select ng-model="fontStyle" ng-change="style()">
<option value="larger">larger</option>
<option value="middle">middle</option>
<option value="small">small</option>
</select>
</body>
</html>
my script goes here which contains the controller as well as directive.
var app=angular.module('myApp',['gridster'])
app.controller('myController',function($scope){
$scope.Items = [
{ sizeX: 2, sizeY: 1, row: 0, col: 0, obj:{data:54565463,right:67566,title:'Headers'}},
{ sizeX: 2, sizeY: 1, row: 0, col: 0, obj: {data:65476756,right:12344,title:"Income"}}]
$scope.style = function() {
style = $scope.fontStyle;
switch (style) {
case 'larger':
$scope.myStyle = {
"font-size": "2.3em",
}
break;
case 'middle':
$scope.myStyle = {
"font-size": "2.0em"
}
break;
case 'small':
$scope.myStyle = {
"font-size": "1.3em",
}
break;
default:
alert('/#larger');
}
}
});
app.directive('myWidget',function(){
return{
restrict:"EA",
scope:{
title:'#',
data:'=',
},
templateUrl:'spare.html',
}
});
and my spare html is below -
<span ng-controller="myController" >
<div class="panel-body" >
<h1 class="title" >{{data.title}}</h1>
<i class="fa fa-dollar"></i>{{data.data}}
</h1></div>
<p id="rightcorner"><i class="fa fa-level-up"></i>{{data.right}}
</p>
</span>
Use ng-style for elements that you want assign style dynamically.
See documentation for details and examples.
If you want to add style which is stored in $scope.myStyle it goes like that:
<div ng-style="myStyle">...</div>
Complete example:
HTML:
<div ng-app="app" ng-controller="myController">
myStyle current value: {{myStyle}}
<div ng-style="myStyle">
element with style
</div>
<button ng-click=changeStyle()>
Change style
</button>
</div>
JS:
angular.module("app", []).controller("myController", function($scope) {
$scope.myStyle = {
color: 'red'
};
$scope.changeStyle = function() {
$scope.myStyle = {
color: 'blue'
};
}
});
Working jsfiddle
I need to show an Edit icon on a particular element, but as hovering it shows the Edit icon on each element in ng-repeat. How can I achieve it using controllerAs?
Please provide me solution for the same. I'm able to achieve through normal behaviour($scope), but unable to get it through a controller.
Here is the link -- >
enter code herehttp://plnkr.co/edit/ETMyoDLR8HPFIZFrA90n?p=preview
Here is what you need. Instead of setting the hoverEdit with the controller use it instead with the task.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function() {
var ma = this;
ma.tasks = [{
name: 'Item One'
},
{
name: 'The second item'
},
{
name: 'Three items is the best'
}
];
ma.hoverIn = function(task) {
task.hoverEdit = true;
};
ma.hoverOut = function(task) {
task.hoverEdit = false;
};
});
/* Put your css in here */
li {
width: 200px;
list-style-type: none;
padding: 6px 10px;
}
li:hover {
background: #EEE;
}
.animate-show {
-webkit-transition: all linear 0.5s;
transition: all linear 0.5s;
opacity: 1;
}
.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
display: inline-block !important;
}
.animate-show.ng-hide {
opacity: 0;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl as ma">
<ul>
<li ng-repeat="task in ma.tasks" ng-mouseover="ma.hoverIn(task)" ng-mouseleave="ma.hoverOut(task)">
{{task.name}}
<span ng-show="task.hoverEdit" class="animate-show">
<a>
<img src="https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519584-081_Pen-16.png" alt="">
Edit
</a>
</span>
</li>
</ul>
</body>
</html>
Hope it helps :)
you can use $index to set the index to hoverEdit
ma.hoverIn = function(index){
ma.hoverEdit = index;
};
ma.hoverOut = function(){
ma.hoverEdit = null;
};
checking if you are hovering the index and display it using ng-show
<ul>
<li ng-repeat="task in ma.tasks" ng-mouseover="ma.hoverIn($index)" ng-mouseleave="ma.hoverOut()">
{{task.name}}
<span ng-show="ma.hoverEdit == $index" class="animate-show">
<a>
<img src="https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519584-081_Pen-16.png" alt="">
Edit
</a>
</span>
</li>
here is the plunker
There is one more solution please have a look into this added plunker code.
<body ng-controller="MainCtrl as ma">
<ul>
<li ng-repeat="task in ma.tasks" ng-mouseover="ma.hoverIn(task)" ng-mouseleave="ma.hoverOut(task)">
{{task.name}}
<span ng-show="task.hoverEdit" class="animate-show">
<a>
<img src="https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519584-081_Pen-16.png" alt="">
Edit
</a>
</span>
</li>
</ul>
</body>
var app = angular.module('plunker', ['ngAnimate']);
app.controller('MainCtrl', function() {
var ma=this;
ma.tasks = [
{name: 'Item One', hoverEdit : false},
{name: 'The second item', hoverEdit : false},
{name: 'Three items is the best', hoverEdit : false}
];
ma.hoverIn = function(obj){
obj.hoverEdit = true;
};
ma.hoverOut = function(obj){
obj.hoverEdit = false;
};
});
This is my first project with angularjs. I'm using md-data-table for angular material web app. I installed md-data-table and it started asking for lodash. So I installed lodash. That's when I got this [error][1]. So I thought maybe angular-lodash might help, and I got another error that says _.methods is not a function. I found some posts about lodash does not support certain functions anymore. But I can't seem to find anything useful to my case. What am i missing here?
Code:
var app = angular.module('app', [
'ngMaterial',
'ngMaterialSidemenu',
'mdPickers',
'ui.grid',
'mdDataTable']);
app.controller('appCtrl', function ($scope, $mdDialog, $mdpTimePicker) {
$scope.items = [1, 2, 3, 4, 5];
$scope.selectedItem = $scope.items[0];
$scope.getSelectedText = function () {
if ($scope.selectedItem != undefined) {
return 'You chose ' + $scope.selectedItem + '.';
} else {
return 'Choose an item.';
}
};
$scope.selectedTime = $scope.selectedDate = new Date();
$scope.message = 'Hello';
// directive
$scope.point = {
pointId: '1001'
};
$scope.browser = function (ev) {
var searchByColumns = [
'Point ID',
'Description'
];
var pointList = [{
pointId: '1001',
description: 'point 1'
}, {
pointId: '1002',
description: 'point 2'
}, {
pointId: '1003',
description: 'point 3'
}];
$mdDialog.show({
templateUrl: '/dialogs/browser/grid-browser.html',
parent: angular.element(document.body),
targetEvent: ev,
locals: {
items: pointList,
searchByColumns: searchByColumns
},
openFrom: '#searchBtn',
clickOutsideToClose: true,
controller: function ($scope, items, searchByColumns) {
$scope.items = items;
$scope.searchByColumns = searchByColumns;
$scope.selectedColumn = $scope.searchByColumns[0];
$scope.getSelectedText = function () {
return $scope.selectedColumn;
};
}
})
// .then(function (answer) {
// $scope.status = 'You said the information was "' + answer + '".';
// }, function () {
// $scope.status = 'You cancelled the dialog.';
// })
;
};
$scope.nutritionList = [{
id: 601,
name: 'Frozen joghurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
sodium: 87,
calcium: '14%',
iron: '1%'
}, {
id: 602,
name: 'Ice cream sandwitch',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
sodium: 129,
calcium: '84%',
iron: '1%'
}, {
id: 603,
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 24,
protein: 6.0,
sodium: 337,
calcium: '6%',
iron: '7%'
}];
});
<html lang="en">
<head>
<link rel="stylesheet" href="/node_modules/angular-material/angular-material.css"></link>
<link rel="stylesheet" href="/node_modules/angular-material-sidemenu/dist/angular-material-sidemenu.css"></link>
<link rel="stylesheet" href="/node_modules/mdPickers/dist/mdPickers.css"></link>
<link rel="stylesheet" href="/node_modules/angular-material-time-picker/dist/md-time-picker.css"></link>
<link rel="stylesheet" href="/assets/md-data-table/md-data-table.min.css"></script>
<link rel="stylesheet" href="/assets/css.css"></link>
<link rel="stylesheet" href="/assets/icons.css"></link>
<link rel="stylesheet" href="/assets/ui-grid/ui-grid.min.css"></link>
<link rel="stylesheet" href="/main.css"></link>
</head>
<body ng-app="app" ng-controller="appCtrl" ng-cloak>
<md-toolbar class="md-primary">
<div class="md-toolbar-tools">
<h2 class="md-flex">HTML 5</h2>
</div>
</md-toolbar>
<md-content layout-padding layout="row">
<md-sidemenu locked="false">
<md-sidemenu-group>
<md-sidemenu-content md-icon="home" md-heading="Master" md-arrow="true">
<md-sidemenu-button ng-href="#pointMaster">Point</md-sidemenu-button>
<md-sidemenu-button href="#">Submenu 2</md-sidemenu-button>
<md-sidemenu-button href="#">Submenu 3</md-sidemenu-button>
</md-sidemenu-content>
<md-sidemenu-content md-heading="Menu 2" md-arrow="true">
<md-sidemenu-button href="#">Submenu 1</md-sidemenu-button>
<md-sidemenu-button href="#">Submenu 2</md-sidemenu-button>
<md-sidemenu-button href="#">Submenu 3</md-sidemenu-button>
</md-sidemenu-content>
</md-sidemenu-group>
<md-sidemenu-group>
<md-divider></md-divider>
<md-subheader class="md-no-sticky">Caption</md-subheader>
<md-sidemenu-button href="#">Menu 4</md-sidemenu-button>
</md-sidemenu-group>
</md-sidemenu>
<md-tabs md-dynamic-height md-border-bottom flex="75">
<md-tab label="Tax">
<form flex>
<div layout="row" layout-align="start center">
<input-button flex="50" md-margin required="false" label="Point ID" tableId="point.pointId" browse="browser()"></input-button>
<span style="width: 20px"></span>
<md-checkbox aria-label="Default" class="md-primary" layout-align="center center" flex>
Default
</md-checkbox>
</div>
<div layout="row">
<md-input-container>
<label>Items</label>
<md-select ng-model="selectedItem" md-selected-text="getSelectedText()">
<md-optgroup label="items">
<md-option ng-value="item" ng-repeat="item in items">Item {{item}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
<mdp-time-picker mdp-auto-switch="true" ng-model="selectedTime" message="message">
</mdp-time-picker>
</div>
<div layout="row" flex>
<md-button class="md-raised md-primary">Save</md-button>
<md-button class="md-raised md-warn">Delete</md-button>
<md-button class="md-raised md-primary" ng-disabled="true">Reset</md-button>
</div>
<div layout="row" flex>
<md-datepicker ng-model="selectedDate" md-placeholder="Enter date" layout-align="start center" md-open-on-focus>
</md-datepicker>
</div>
</form>
</md-tab>
<md-tab label="Family" layout="column" flex>
<mdt-table mdt-row="{'data': nutritionList, 'table-row-id-key': 'id',
'column-keys': ['name', 'calories', 'fat', 'carbs', 'protein', 'sodium', 'calcium', 'iron']}">
<mdt-header-row>
<mdt-column align-rule="left">Dessert (100g serving)</mdt-column>
<mdt-column align-rule="right">Calories</mdt-column>
<mdt-column align-rule="right">Fat (g)</mdt-column>
<mdt-column align-rule="right">Carbs (g)</mdt-column>
<mdt-column align-rule="right">Protein (g)</mdt-column>
<mdt-column align-rule="right">Sodium (mg)</mdt-column>
<mdt-column align-rule="right">Calcium (%)</mdt-column>
<mdt-column align-rule="right">Iron (%)</mdt-column>
</mdt-header-row>
<mdt-custom-cell column-key="Dessert" ng-click="viewFats(value)">
<span ng-repeat="name in names">{{value}}</span>
</mdt-custom-cell>
</mdt-table>
</md-tab>
</md-tabs>
</md-content>
</body>
<script src="/node_modules/angular/angular.js"></script>
<script src="/node_modules/angular-animate/angular-animate.js"></script>
<script src="/node_modules/angular-aria/angular-aria.js"></script>
<script src="/node_modules/angular-messages/angular-messages.js"></script>
<script src="/node_modules/moment/moment.js"></script>
<script src="/node_modules/angular-moment/angular-moment.js"></script>
<script src="/node_modules/angular-material/angular-material.js"></script>
<script src="/node_modules/angular-sanitize/angular-sanitize.min.js"></script>
<script src="/node_modules/angular-material-sidemenu/dist/angular-material-sidemenu.js"></script>
<script src="/node_modules/mdPickers/dist/mdPickers.js"></script>
<script src="/node_modules/angular-material-time-picker/dist/md-time-picker.js"></script>
<script src="/assets/lodash/lodash.min.js"></script>
<script src="/assets/md-data-table/md-data-table.min.js"></script>
<script src="/assets/md-data-table/md-data-table-templates.min.js"></script>
<script src="/assets/ui-grid/ui-grid.min.js"></script>
<script src="/assets/angular-material-icons.min.js"></script>
<script src="/app.js"></script>
<script src="/directives/input-button/input-button.js"></script>
<script src="/dialogs/browser/grid-browser.js"></script>
</html>
ps://i.stack.imgur.com/WmdiC.png
#Htet Aung,
The code snippet provided by you does not have valid md-data-table tags in html and also errors while injecting md-data-table. For your information you are using "mdDataTable" which was designed for ANGULAR (angular2) version. But looking at your code suggests you need md-data-table for Angularjs(version 1.x).
No Need for loadash libraries. just normal md-data-table.js from cdnjs will do and inject the dependency 'md.data.table' in your module.
Please find the below :
[MD Data Table for AngularJs Material and Angularjs 1.x version]
[1]: https://codepen.io/anon/pen/BjvLVJ?editors=1010
functionality
I have a ng-grid. One column has an "edit" button. Once you click on edit button the "edit" button gets disabled and "cancel" and "remove" gets enabled and all the columns of the row becomes editable.
Issue
I am able to edit multiple rows at a time. This is not expected behavior.
Expected behavior
When one row is already in edit mode. And I click on the edit button in some other row, then the previous editable row should become un-editable.
-->Edited value in previous row should be reverted.
--> Only one row at a give point can be editable.
Here is the link of what I have tried.
Plnkr link
html code
<html>
<head>
<link data-require="ng-grid#*" data-semver="2.0.14" rel="stylesheet" href="//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/ng-grid.css" />
<script data-require="jquery#*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.debug.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</div>
<button ng-show="row.entity.edit" id="cancelBtn" type="button" class="btn btn-primary" ng-click="cancel(row)" >Cancel</button>
</div>
</body>
</html>
JavaScript Code
var m = angular.module("myApp", ["ngGrid"]);
m.controller("myCtrl", function($scope) {
//console.log("Here I need to know which button was selected " + row.entity.name)
var removeTemplate = '<input type="button" value="remove" ng-click="removeRow(row)" />';
var ageTextBoxTemplate = '<div class="ngCellText"><div ng-show="!row.entity.edit[{{row.rowIndex}}]">{{row.getProperty(col.field)}}</div>' +
'<div ng-show="row.entity.edit[{{row.rowIndex}}]" class="ngCellText"><input type="text" ng-model="row.entity.age"/></div></div>';
var nameTextBoxTemplate = '<div class="ngCellText"><div ng-show="!row.entity.edit">{{row.getProperty(col.field)}}</div>' +
'<div ng-show="row.entity.edit" class="ngCellText"><input type="text" ng-model="row.entity.name"/></div></div>';
var editButtonTemplate = '<button ng-show="!row.entity.edit" id="editBtn" type="button" class="btn btn-primary" ng-click="edit(row)" >Edit</button>' +
'<button ng-show="row.entity.edit" id="cancelBtn" type="button" class="btn btn-primary" ng-click="cancel(row)" >Cancel</button> ' +
'<button ng-show="row.entity.edit" id="saveBtn{{row.rowindex}}" type="button" class="btn btn-primary" ng-click="save(row)" >Save</button> ';
//var checkboxTemplate='<input type="checkbox" ng-model="row.entity.object.dude" ng-click="toggle(row)">';
var checkboxTemplate = '<input ng-show="!row.entity.edit" type="checkbox" ng-model="row.entity.object.edit" disabled=true>' +
'<input ng-show="row.entity.edit" type="checkbox" ng-model="row.entity.object.edit">';
$scope.tempdata = {
name: "",
age: "",
flag: false
}
$scope.edit = function(row) {
row.entity.edit[row.rowIndex] = ! row.entity.edit[row.rowIndex];
$scope.tempdata.name = row.entity.name;
$scope.tempdata.age = row.entity.age;
$scope.tempdata.flag = row.entity.object.edit;
};
$scope.cancel = function(row) {
row.entity.edit = !row.entity.edit;
row.entity.name = $scope.tempdata.name;
row.entity.age = $scope.tempdata.age;
row.entity.object.edit = $scope.tempdata.flag;
};
$scope.save = function(row) {
row.entity.edit = !row.entity.edit;
if($scope.tempdata.flag === row.entity.object.edit){
alert("value not changed");
}
console.log(row.entity);
};
$scope.removeRow = function(row) {
var index = row.rowIndex;
$scope.gridOptions.selectItem(index, false);
$scope.myData.splice(index, 1);
};
$scope.myData = [{
name: "Rajesh",
age: 27,
edit: false,
object: {
edit: true
}
},
{
name: "Saurav",
age: 31,
object: {
edit: true
}
},
{
name: "Rajubabu",
age: 32,
object: {
edit: false
}
}, {
name: "Joby",
age: 37,
object: {
edit: true
}
}, {
name: "Manish",
age: 41,
object: {
edit: false
}
}, {
name: "Sidhansu",
age: 31,
object: {
edit: true
}
}
];
$scope.gridOptions = {
data: 'myData',
enableRowSelection: true,
//showSelectionCheckbox: true,
enablePaging: true,
enableColumnResize: true,
columnDefs: [{
field: 'name',
displayName: 'Name',
cellTemplate: nameTextBoxTemplate
}, {
field: 'age',
displayName: 'Age',
cellTemplate: ageTextBoxTemplate
}, {
displayName: 'Edit/Cancel/Save',
cellTemplate: editButtonTemplate
}, {
displayName: 'Delete',
cellTemplate: removeTemplate
}, {
field: 'edit',
displayName: 'edit',
cellTemplate: checkboxTemplate
}
]
};
});
A plnkr of solution would be highly appreciated.