Forked from umidjons/show-clicked-row-details-right-way.md
Created
July 11, 2016 19:18
-
-
Save JustJenFelice/97f48f2c5f9582fa8447b871eca1e92b to your computer and use it in GitHub Desktop.
Revisions
-
umidjons revised this gist
Sep 6, 2014 . 1 changed file with 62 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,62 @@ Show clicked row details. Using ng-if, ng-repeat-start and ng-repeat-end directives === ```html <!doctype html> <html lang="en-US" ng-app="App"> <head> <meta charset="UTF-8"> <script src="angular.js"></script> <title>Users</title> <style> table{ border-collapse:collapse; } td, th{ border:1px solid #999; } </style> </head> <body> <table ng-controller="UsersCtrl"> <thead> <tr> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr ng-repeat-start="user in users" ng-click="selUser(user)"> <td>{{user.name}}</td> <td>{{user.age}}</td> </tr> <tr ng-repeat-end ng-if="isSelected(user)"> <td colspan="2">{{user.desc}}</td> </tr> </tbody> </table> <script> angular.module('App',[]) .factory('Users',function(){ return { query:function(){ return [ {name:'John',age:25,desc:'Software Developer at MacroSoft LLC'}, {name:'Jonatan',age:26,desc:'Professor at University of Tashkent'}, {name:'Nataly',age:27,desc:'Nurse at central hospital'}, {name:'Lucy',age:28,desc:'Teacher at district school'} ]; } } }) .controller('UsersCtrl',function($scope,Users){ $scope.users=Users.query(); $scope.selUser=function(user){ $scope.selected_user=user; } $scope.isSelected=function(user){ return $scope.selected_user===user; } }); </script> </body> </html> ``` -
Sep 6, 2014 . 1 changed file with 102 additions and 22 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -11,6 +11,105 @@ I also define `selIdx` to use in `ng-class` to switch class according selected u Here is our AngularJS code: ```javascript angular.module('App',[]) .factory('Users',function(){ return { query:function(){ return [ {name:'John',age:25,desc:'Software Developer at MacroSoft LLC'}, {name:'Jonatan',age:26,desc:'Professor at University of Tashkent'}, {name:'Nataly',age:27,desc:'Nurse at central hospital'}, {name:'Lucy',age:28,desc:'Teacher at district school'} ]; } } }) .controller('UsersCtrl',function($scope,Users){ $scope.users=Users.query(); $scope.selIdx= -1; $scope.selUser=function(user,idx){ $scope.selectedUser=user; $scope.selIdx=idx; } $scope.isSelUser=function(user){ return $scope.selectedUser===user; } }); ``` Here is our markup: ```html <table ng-controller="UsersCtrl"> <thead> <tr> <th class="col-1">Name</th> <th class="col-2">Age</th> </tr> </thead> <tbody ng-repeat="user in users" ng-switch on="isSelUser(user)" ng-click="selUser(user,$index)"> <tr ng-class="{sel:selIdx==$index}"> <td>{{user.name}}</td> <td>{{user.age}}</td> </tr> <tr ng-switch-when="true"> <td colspan="2" class="desc">{{user.desc}}</td> </tr> </tbody> </table> ``` `ng-switch-when` used to show `tr` only when current row is selected row. Here is some styling: ```css table { border-collapse: collapse; } td, th { border: 1px solid #999; } .col-1 { width: 200px; } .col-2 { width: 300px; } .sel { background-color: #bce65e; } .desc { background-color: #d1e6ac; } ``` Full code is below: ```html <!doctype html> <html lang="en-US" ng-app="App"> <head> <meta charset="UTF-8"> <script src="angular.js"></script> <title>Users</title> <style> table { border-collapse: collapse; } td, th { border: 1px solid #999; } .col-1 { width: 200px; } .col-2 { width: 300px; } .sel { background-color: #bce65e; } .desc { background-color: #d1e6ac; } </style> </head> <body> <table ng-controller="UsersCtrl"> <thead> <tr> <th class="col-1">Name</th> <th class="col-2">Age</th> </tr> </thead> <tbody ng-repeat="user in users" ng-switch on="isSelUser(user)" ng-click="selUser(user,$index)"> <tr ng-class="{sel:selIdx==$index}"> <td>{{user.name}}</td> <td>{{user.age}}</td> </tr> <tr ng-switch-when="true"> <td colspan="2" class="desc">{{user.desc}}</td> </tr> </tbody> </table> <script> angular.module('App',[]) .factory('Users',function(){ return { @@ -37,26 +136,7 @@ Here is our AngularJS code: return $scope.selectedUser===user; } }); </script> </body> </html> ``` -
Sep 6, 2014 . 1 changed file with 25 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -4,7 +4,9 @@ Show clicked row details. Using ng-switch, ng-click, ng-class, ng-repeat, $index I want to show additional row (user details) below clicked row (selected user) with details. First I need some data, therefore I create `Users` factory with `query` method. I'll show user `name` and `age` in row by default, but show `desc` only for selected user. I create 2 methods, `selUser(user,idx)` - called when clicked onto the row to select user and its index in table, `isSelUser(user)` - called to determine, is current row contains selected user. I also define `selIdx` to use in `ng-class` to switch class according selected user index. Here is our AngularJS code: @@ -35,4 +37,26 @@ Here is our AngularJS code: return $scope.selectedUser===user; } }); ``` Here is our markup: ```html <table ng-controller="UsersCtrl"> <thead> <tr> <th class="col-1">Name</th> <th class="col-2">Age</th> </tr> </thead> <tbody ng-repeat="user in users" ng-switch on="isSelUser(user)" ng-click="selUser(user,$index)"> <tr ng-class="{sel:selIdx==$index}"> <td>{{user.name}}</td> <td>{{user.age}}</td> </tr> <tr ng-switch-when="true"> <td colspan="2" class="desc">{{user.desc}}</td> </tr> </tbody> </table> ``` -
Sep 6, 2014 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,38 @@ Show clicked row details. Using ng-switch, ng-click, ng-class, ng-repeat, $index. === I want to show additional row (user details) below clicked row (selected user) with details. First I need some data, therefore I create `Users` factory with `query` method. I'll show user `name` and `age` in row by default, but show `desc` only for selected user. Here is our AngularJS code: ```javascript angular.module('App',[]) .factory('Users',function(){ return { query:function(){ return [ {name:'John',age:25,desc:'Software Developer at MacroSoft LLC'}, {name:'Jonatan',age:26,desc:'Professor at University of Tashkent'}, {name:'Nataly',age:27,desc:'Nurse at central hospital'}, {name:'Lucy',age:28,desc:'Teacher at district school'} ]; } } }) .controller('UsersCtrl',function($scope,Users){ $scope.users=Users.query(); $scope.selIdx= -1; $scope.selUser=function(user,idx){ $scope.selectedUser=user; $scope.selIdx=idx; } $scope.isSelUser=function(user){ return $scope.selectedUser===user; } }); ```