<table class="table table-striped" >
<thead>
<tr>
<th>Number</th>
<th>Zeroes</th>
</tr>
</thead>
<tbody ng-controller="ViewData as viewAll">
<tr ng-repeat="pop in viewAll.number">
<td>{{pop.number}}</td>
<td>{{pop.zeroes}}</td>
</tbody>
</table>
I have this table and I'm trying to get data to be outputted in it.
app.controller('ViewData', ['$http', '$scope',
function($http,$scope) {
$scope.viewAll = this;
$http.get('/someurl').success(function(data) {
$scope.viewAll.number = data;
});
}]);
This my controller getting the data.
{"number": {
"4": {
"zeroes": "5"
},
"5": {
"zeroes": "6"
},
"10": {
"zeroes": "7"
}}
And this is the data that /someurl is giving out to me.. Is there any way I can be able to handle this so I can be able to show it outside the table.
Thanks in advance for any kind of help given!
try:
<table class="table table-striped" >
<thead>
<tr>
<th>Number</th>
<th>Zeroes</th>
</tr>
</thead>
<tbody ng-controller="ViewData as viewAll">
<tr ng-repeat="{key, value} in viewAll.number">
<td>{{key}}</td>
<td>{{value.zeroes}}</td>
</tbody>
</table>
app.controller('ViewData', ['$http', '$scope',
function($http,$scope) {
var self = this;
$http.get('/someurl').success(function(data) {
self.number = data;
});
}]);
Related
This is my template for component gamesGrid which I am using in index.html. Inside of this template I have a table on which i want to use ng-repeat but it is not working.
<div class="container">
<table class="table table-hover">
<thead>
<tr>
<th>Title</th>
<th>Platform</th>
<th>Score</th>
<th>Genre</th>
<th>Editor's Choice</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="detail in gamesDetails">
<td>{{detail.title}}</td>
</tr>
</tbody>
</table>
</div>
This is my component.js file
(function() {
'use strict';
angular.module('myApp').component('gamesGrid', {
templateUrl: './components/games-grid.view.html',
controller:'gamesGridController'
});
})();
This is my controller.js file
angular.module('myApp').controller('gamesGridController',function(gridDataFactory) {
this.$onInit = function() {
};
this.$postLink = function() {
this.gamesDetails = [];
gridDataFactory.fetchUserDetails().then(function(response) {
this.gamesDetails = response;
console.log(this.gamesDetails);
});
}
});
And this is my factory:
angular.module('myApp').factory('gridDataFactory', function($http) {
var gameDetails = [];
var obj = {};
obj.fetchUserDetails = function(){
return $http.get('http://starlord.hackerearth.com/gamesarena').then(function(response) {
gameDetails = response.data;
gameDetails.shift();
return gameDetails;
});
}
return obj;
});
As you can see i have ng-repeat in my template but it is not working and i am not able to see any data on view.
You are using this.gamesDetails so change your View to use controller syntax as follows.
<div class="container" ng-controller="gamesGridController as ctrl">
<table class="table table-hover">
<thead>
<tr>
<th>Title</th>
<th>Platform</th>
<th>Score</th>
<th>Genre</th>
<th>Editor's Choice</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="detail in ctrl.gamesDetails">
<td>{{detail.title}}</td>
</tr>
</tbody>
</table>
</div>
this.$postLink = function() {
this.gamesDetails = [];
gridDataFactory.fetchUserDetails().then(function(response) {
$scope.gamesDetails = response;
console.log(this.gamesDetails);
});
}
In this piece of code i see you have assigned this.gameDetails, which is not available in the scope. Use $scope.gameDetails to bind it to the view.
I am trying to search using angularjs filter method but its not working. I am not getting any errors in the console but still the search result is not showing up. Can someone help me on this.
This is my controller.js code:
.controller('SearchController',
[
'$scope',
'dataService',
'$location',
'$routeParams',
function ($scope, dataService, $location, $routeParams){
$scope.searchMovies = [ ];
$scope.searchCount = 0;
var getSearchResult = function (terms) {
dataService.getSearchResult(terms).then(
function (response) {
$scope.searchCount = response.rowCount + ' movies';
$scope.searchMovies = response.data;
$scope.showSuccessMessage = true;
$scope.successMessage = "All movie Success";
},
function (err){
$scope.status = 'Unable to load data ' + err;
}
); // end of getStudents().then
};
if ($routeParams && $routeParams.term) {
console.log($routeParams.term);
getSearchResult($routeParams.term);
}
}
]
);
This is the services.js code:
this.getSearchResult = function (terms) {
var defer = $q.defer(),
data = {
action: 'search',
term: terms
}
$http.get(urlBase, {params: data, cache: true}).
success(function(response){
defer.resolve({
data: response.ResultSet.Result,
rowCount: response.RowCount
});
}).
error(function(err){
defer.reject(err);
});
return defer.promise;
};
This is my app.js code:
. when('/search', {
templateUrl : 'js/partials/search.html',
controller : 'SearchController'
}).
This is the search.html code:
<div>
<label>Search: <input ng-model="searchMovie"></label><br><br><br><br>
</div>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>Category</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="search in searchMovies | filter:searchMovie">
<td>
{{search.title}}
</td>
<td>
{{search.description}}
</td>
<td>
{{search.name}}
</td>
</tr>
</tbody>
</table>
The search data is being retrieved from the database. I have tested the SQL and it works fine. Just thee problem is in the angularjs server side. Thank you.
You need to give Alias for controller in your app.js file
.when('/search', {
templateUrl : 'js/partials/search.html',
controller : 'SearchController'
controllerAs: 'movies',
});
Now After This in your search.html file pass controllerAs
<div>
<label>Search: <input ng-model="searchMovie"></label><br><br><br><br>
</div>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>Category</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="search in searchMovies | filter:searchMovie">
<td>
{{movies.search.title}}
</td>
<td>
{{movies.search.description}}
</td>
<td>
{{movies.search.name}}
</td>
</tr>
</tbody>
I'm trying to use ng-switch in AngularJS to expand a row in a table list to show another table (containing more details about that list item) when it's clicked.
However, I'm having trouble displaying the nested table. I've noticed that the problem only happens with nested tables. If I'm using ng-switch to expand a td instead of a table, it works as expected.
Here's a JSFiddle and my code to illustrate the problem: fiddle
The html:
<body ng-app="listAndDetails">
<div>
<table class="table table-bordered" ng-controller="ListAndOneDetailCtrl">
<thead>
<tr>
<th>Name</th>
<th>e-mail</th>
</tr>
</thead>
<tbody ng-repeat="user in users" ng-click="toggleSelected()" ng-switch on="isSelected(user)">
<tr>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
</tr>
<tr ng-switch-when="true" class="light-gray">
<table>
<tr>
<td>Country</td>
<td>Address</td>
<td>Description</td>
</tr>
<tr>
<td>{{user.country}}</td>
<td>{{user.address}}</td>
<td>{{user.desc}}</td>
</tr>
</table>
</tr>
</tbody>
</table>
</div>
<div ng-controller="ListAndManyDetailsCtrl">
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>e-mail</th>
</tr>
</thead>
<tbody ng-repeat="user in users" ng-controller="UserCtrl" ng-click="toggleSelected()" ng-switch on="isSelected()">
<tr>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
</tr>
<tr ng-switch-when="true" class="light-gray">
<td>{{user.country}}</td>
<td>{{user.address}}</td>
<td>{{user.desc}}</td>
</tr>
</tbody>
</table>
</div>
</body>
The javascript:
angular.module('listAndDetails', [])
.value('users', [
{ name:'Damien', email:'damien#domain.com', desc:'Damien details go here...', country:'US', address:'address1'},
{ name:'Alex', email:'alex#domain.com', desc:'Alex details go here...', country:'UK', address:'address2'}
])
.controller('ListAndOneDetailCtrl', function ($scope, users) {
$scope.users = users;
$scope.selectUser = function (user) {
$scope.selectedUser = user;
};
$scope.isSelected = function (user) {
return $scope.selectedUser === user;
};
})
.controller('ListAndManyDetailsCtrl', function ($scope, users) {
$scope.users = users;
})
.controller('UserCtrl', function ($scope) {
$scope.toggleSelected = function () {
$scope.selected = !$scope.selected;
};
$scope.isSelected = function (user) {
return $scope.selected;
};
});
The div on top attempts to show a nested table upon clicking the list item, but nothing happens.
The div at the bottom attempts to show child td items upon clicking the list item and it works exactly as expected.
Does anyone have any idea what the problem is when I'm trying to expand to show a nested table using ng-switch? And how to solve it?
You have a two errors in your code.
First
In controller ListAndOneDetailCtrl on ng-click you don't have a function toggleSelected.
Second
In first table with controller ListAndOneDetailCtrl you don't have tag td in nested table.
See correct code in jsfiddle
angular.module('listAndDetails', [])
.value('users', [
{ name:'Damien', email:'damien#domain.com', desc:'Damien details go here...', country:'US', address:'address1'},
{ name:'Alex', email:'alex#domain.com', desc:'Alex details go here...', country:'UK', address:'address2'}
])
.controller('ListAndOneDetailCtrl', function ($scope, users) {
$scope.users = users;
$scope.selectUser = function (user) {
$scope.selectedUser = user;
};
$scope.isSelected = function (user) {
return $scope.selectedUser === user;
};
})
.controller('ListAndManyDetailsCtrl', function ($scope, users) {
$scope.users = users;
})
.controller('UserCtrl', function ($scope) {
$scope.toggleSelected = function () {
$scope.selected = !$scope.selected;
};
$scope.isSelected = function (user) {
return $scope.selected;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="listAndDetails">
<div>
<table class="table table-bordered" ng-controller="ListAndOneDetailCtrl">
<thead>
<tr>
<th>Name</th>
<th>e-mail</th>
</tr>
</thead>
<tbody ng-repeat="user in users" ng-click="selectUser(user)" ng-switch on="isSelected(user)">
<tr>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
</tr>
<tr ng-switch-when="true" class="light-gray">
<td>
<table>
<tr>
<td>Country</td>
<td>Address</td>
<td>Description</td>
</tr>
<tr>
<td>{{user.country}}</td>
<td>{{user.address}}</td>
<td>{{user.desc}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div ng-controller="ListAndManyDetailsCtrl">
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>e-mail</th>
</tr>
</thead>
<tbody ng-repeat="user in users" ng-controller="UserCtrl" ng-click="toggleSelected()" ng-switch on="isSelected()">
<tr>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
</tr>
<tr ng-switch-when="true" class="light-gray">
<td>{{user.country}}</td>
<td>{{user.address}}</td>
<td>{{user.desc}}</td>
</tr>
</tbody>
</table>
</div>
</body>
There were two problems:
you needed a td section enclosing your table;
<tr>
<td>
<table>
<!-- table information -->
</table>
</td>
</tr>
the controller needed some modifications so that the selected user could have a value.
.controller('ListAndOneDetailCtrl', function ($scope, users) {
$scope.users = users;
$scope.toggleSelected = function(user) {
$scope.selectedUser = user;
};
$scope.selectUser = function (user) {
$scope.selectedUser = user;
};
$scope.isSelected = function (user) {
return $scope.selectedUser === user;
};
})
Here's an updated fiddle: https://jsfiddle.net/jp43agsb/2/
Plunker sample
How to hide table column if all json value is null for any property
using angular js
index.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.isArray = angular.isArray;
$scope.data = [{
"Id": null,
"Title": "US",
"Description": "English - United States",
"Values": [{
"Id": 100,
"LanId": 1,
"KeyId": 59,
"Value": "Save"
}]
}, {
"Id": null,
"Title": "MX",
"Description": "test",
"Values": [{
"Id": 100,
"LanId": 1,
"KeyId": 59,
"Value": "Save"
}]
}, {
"Id": null,
"Title": "SE",
"Description": "Swedish - Sweden",
"Values": [{
"Id": 100,
"LanId": 1,
"KeyId": 59,
"Value": "Save"
}]
}]
$scope.cols = Object.keys($scope.data[0]);
$scope.notSorted = function(obj) {
if (!obj) {
return [];
}
return Object.keys(obj);
}
});
index.html
<table border=1 style="margin-top: 0px !important;">
<thead>
<tr>
<th ng-repeat="(k,v) in data[0]">{{k}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td ng-repeat="(prop, value) in item" ng-init="isArr = isArray(value)">
<table ng-if="isArr" border=1>
<thead>
<tr>
<td>
<button ng-click="expanded = !expanded" expand>
<span ng-bind="expanded ? '-' : '+'"></span>
</button>
</td>
</tr>
<tr>
<th ng-repeat="(sh, sv) in value[0]">{{sh}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="sub in value" ng-show="expanded">
<td ng-repeat="(sk, sv) in sub">{{sv}}</td>
</tr>
</tbody>
</table>
<span ng-if="!isArr">{{value}}</span>
</td>
</tr>
</tbody>
</table>
You can filter out columns that have only null values with:
JavaScript
$scope.cols = Object.keys($scope.data[0]).filter(function(col) {
return $scope.data.some(function(item) {
return item[col] !== null;
});
});
and check in template if this column should be rendered:
HTML
<table border=1 style="margin-top: 0px !important;">
<thead>
<tr>
<!-- Iterate over non-null columns -->
<th ng-repeat="col in cols">{{col}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data">
<!-- Use ngIf to hide redundant column -->
<td ng-if="cols.indexOf(prop)>=0" ng-repeat="(prop, value) in item" ng-init="isArr = isArray(value)" >
...
Plunker
http://plnkr.co/edit/PIbfvX6xvX5eUhYtRBWS?p=preview
So the id is null for every element in the array, then do
<th ng-repeat="(k,v) in data[0]" ng-show="v">{{k}}</th>
and
<td ng-repeat="(prop, value) in item" ng-init="isArr = isArray(value)" ng-show="value">
plnkr: http://plnkr.co/edit/rra778?p=preview
You need to make use of the cols property you defined in your $scope, but you also need to make sure its correct and responsive. You do that like this:
var colsFromData = function(data) {
var activeCols = {};
data.forEach(function(o) {
Object.keys(o).forEach(function(k) {
if(null == o[k])
return;
activeCols[k] = 1;
})
});
return Object.keys(activeCols);
}
$scope.cols = colsFromData($scope.data);
$scope.$watchCollection('data', colsFromData);
Then in your template, to use the now correct cols array:
...
<thead>
<tr>
<th ng-repeat="k in cols">{{k}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td ng-repeat="(prop, value) in item" ng-init="isArr = isArray(value)" ng-if="cols.indexOf(prop) >= 0">
...
And the updated plunker
Hey guys I want to delete item by id in an AngularJS function. How can I get id from delete button?
<table data-ng-app="myApp" data-ng-controller="myController">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>School</th>
<th>Gender</th>
<th>Email</th>
<th>Update</th>
<th>Delete</th>
</tr>
<tr data-ng-repeat="student in students">
<td>{{student.id}}</td>
<td>{{student.name}}</td>
<td>{{student.school}}</td>
<td>{{student.gender}}</td>
<td>{{student.email}}</td>
<td><a href="#" id="tagaUpdate" >Update</a></td>
<td>Delete</td>
</tr>
</tbody>
</table>
Controller:
var myApp = angular.module('myApp', []);
myApp.controller("myController", function ($scope) {
$scope.deleteItem = function (id) {
alert(id);//it doesn't show alert here
};
});
I think the problem is here data-ng-click="deleteItem({{student.id}})". But when I check it shows me value data-ng-click="deleteItem(5).
replace
Delete
by
Delete