I want to create a dynamic data table in angular js which has first column with check box. The data would be in Json format as below,
$scope.items = [
{ "id": "1", "lastName": "Test1", "firstName": "Test", "email": "test1#example.com" },
{ "id": "2", "lastName": "Test2", "firstName": "Test", "email": "test2#example.com" },
{ "id": "3", "lastName": "Test3", "firstName": "Test", "email": "test3#example.com" },
{ "id": "4", "lastName": "Test4", "firstName": "Test", "email": "test4#example.com" },
{ "id": "5", "lastName": "Test5", "firstName": "Test", "email": "test5#example.com" }
];
The id would be a column with checkbox and all other columns will have the data in it.
The headers of the table are also dynamic and so does the column.
If the columns are dynamic
<table style="width:100%">
<tr ng-repeat="item in items | limitTo:1">
<th ng-repeat="(key,value) in item">{{key}}</th>
<td ng-repeat="(key,value) in item">
<div ng-show="key == 'id'">
<input type="checkbox" value={{value}} name="id" />
</div>
<div ng-show="key != 'id'">
{{value}}
</div>
</td>
</tr>
</table>
ng-repeat does JSON ordering for keys, To get ID first follow skipping the JSON ordering Skip JSON ordering (because your JSON has ID first after skipping JSON ordering you will get ID first)
Related
this is my controller :
app.controller('listdata', function($scope, $http) {
$scope.users = [{
"name": "pravin",
"queue": [{
"number": "456",
"status": "Unavailable"
}],
"phone": "7411173737"
},
{
"name": "pratik",
"queue": [{
"number": "111",
"status": "Unavailable"
}],
"phone": "8558855858"
},
{
"name": "priyanka",
"queue": [{
"number": "111",
"status": "Unavailable"
}],
"phone": "5454573737"
},
{
"name": "prerana",
"queue": [{
"number": "111",
"status": "Unavailable"
}],
"phone": "7454543737"
}];
$scope.filter111 = function (user) {
return (user.queue.find(({number}) => number === '111'));
}
});
and this is my view :
<label class="switch">
<input ng-true-value='111' ng-false-value='' type="checkbox" ng-model="queue111">111
</label>
<div class="row" ng-controller="listdata">
<div ng-repeat="user in users|filter:queue111">
<p> {{user.name}} {{user.phone}}</p>
</div>
</div>
When I start the app all the four users from the users data array are displayed. When I click on the filter checkbox, it displays the users who have a queue with a number 111. but it also displays the user pravin as it contains a phone number 7411173737 which contains 111. I want this filter to only display records whose queue number matches with 111 and not with any other fields like the phone number here. So the filter should only display records where the queue number is 111.
What I have done till now :
I have come up with a custom function $scope.filter111 as shown in the code above which returns only those users who have a queue number as 111. I want to use this function as a filter when the checkbox is checked. If I directly do ng-repeat="user in users|filter:filter111" it only displays records with queue number 111(i.e only 3 records) when the app starts(all the four records should be displayed when app starts). So I want this function to be fired only when I check the checkbox and apply it as a filter.
I was think of something like this :
<input ng-true-value="'filter111'" ng-false-value='' type="checkbox" ng-model="queue111">111
but it's not working this way.
How do I achieve this?
I fixed it like this by using the ternary operator in the filter:
var app = angular.module('myApp', []);
app.controller('listdata', function($scope, $http) {
$scope.users = [{
"name": "pravin",
"queue": [{
"number": "456",
"status": "Unavailable"
}],
"phone": "7411173737"
},
{
"name": "pratik",
"queue": [{
"number": "111",
"status": "Unavailable"
},
{
"number": "112",
"status": "Unavailable"
}],
"phone": "8558855858"
},
{
"name": "priyanka",
"queue": [{
"number": "111",
"status": "Unavailable"
}],
"phone": "5454573737"
},
{
"name": "prerana",
"queue": [{
"number": "111",
"status": "Unavailable"
}],
"phone": "7454543737"
}];
$scope.filter111 = function (user) {
return (user.queue.find(({number}) => number === '111'));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.0/angular.min.js"></script>
<div ng-app="myApp">
<label class="switch">
<input type="checkbox" ng-model="queue111">111
</label>
<div class="row" ng-controller="listdata">
<div ng-repeat="user in users|filter: queue111? filter111: ''">
<p> {{user.name}} {{user.phone}}</p>
</div>
</div>
</div>
I have a checkbox as a filter in my angularjs app :
this is my data :
app.controller('listdata', function($scope, $http) {
$scope.users = [{
"name": "pravin",
"queue": [{
"number": "456",
"status": "Unavailable"
}],
"phone": "7411173737"
},
{
"name": "pratik",
"queue": [{
"number": "111",
"status": "Unavailable"
}],
"phone": "8558855858"
},
{
"name": "priyanka",
"queue": [{
"number": "111",
"status": "Unavailable"
}],
"phone": "5454573737"
},
{
"name": "prerana",
"queue": [{
"number": "111",
"status": "Unavailable"
}],
"phone": "7454543737"
}];
});
I'm displaying the above data in my view like this :
//this is the filter
<label class="switch">
<input ng-true-value='111' ng-false-value='' type="checkbox" ng-model="queue111">111
</label>
//ng-repeat part
<div class="row" ng-controller="listdata">
<div ng-repeat="user in users|filter:queue111">
<p> {{user.name}} {{user.phone}}</p>
</div>
</div>
When I start the app all the four users from the users data array are displayed.
When I click on the filter checkbox, it displays the users who have a queue with a number 111. but it also displays the user pravin as it contains a phone number 7411173737 which contains 111. I want this filter to only display records whose queue number matches with 111 and not with any other fields like the phone number here. So the filter should only display records where the queue number is 111.
is it possible to do something like
<input ng-true-value='111' ng-false-value='' type="checkbox" ng-model="queue111.queue.number">111
Current output : it displays all the four data objects in $scope.users
Expected output : display only the data objects where in queue number
is 111 in $scope.users
how do I do it?
Try with this custom filter function to match only values inside the queue array.
var Controller = function($scope) {
$scope.users = [{
"name": "pravin",
"queue": [{
"number": "456",
"status": "Unavailable"
}],
"phone": "7411173737"
},
{
"name": "pratik",
"queue": [{
"number": "111",
"status": "Unavailable"
}],
"phone": "8558855858"
},
{
"name": "priyanka",
"queue": [{
"number": "111",
"status": "Unavailable"
}],
"phone": "5454573737"
},
{
"name": "prerana",
"queue": [{
"number": "111",
"status": "Unavailable"
}],
"phone": "7454543737"
}
];
$scope.filter = function(item) {
if ($scope.queue111) {
return JSON.stringify(item.queue).includes($scope.queue111);
} else {
return true;
}
};
};
angular
.module('app', [])
.controller('Controller', Controller);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Controller">
<label class="switch">
<input ng-true-value='111' ng-false-value='' type="checkbox" ng-model="queue111">
</label>
<pre>Search value: {{queue111}}</pre>
<div ng-repeat="user in users | filter:filter">
{{user.name}} {{user.phone}}
</div>
</div>
I fixed it like this by using a custom function and the ternary operator in the filter:
var app = angular.module('myApp', []);
app.controller('listdata', function($scope, $http) {
$scope.users = [{
"name": "pravin",
"queue": [{
"number": "456",
"status": "Unavailable"
}],
"phone": "7411173737"
},
{
"name": "pratik",
"queue": [{
"number": "111",
"status": "Unavailable"
},
{
"number": "112",
"status": "Unavailable"
}],
"phone": "8558855858"
},
{
"name": "priyanka",
"queue": [{
"number": "111",
"status": "Unavailable"
}],
"phone": "5454573737"
},
{
"name": "prerana",
"queue": [{
"number": "111",
"status": "Unavailable"
}],
"phone": "7454543737"
}];
$scope.filter111 = function (user) {
return (user.queue.find(({number}) => number === '111'));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.0/angular.min.js"></script>
<div ng-app="myApp">
<label class="switch">
<input type="checkbox" ng-model="queue111">111
</label>
<div class="row" ng-controller="listdata">
<div ng-repeat="user in users|filter: queue111? filter111: ''">
<p> {{user.name}} {{user.phone}}</p>
</div>
</div>
</div>
You can just pass true to the filter to enable strict matching.
<div ng-repeat="user in users|filter:queue111:true">
I'm trying to figure out how to dynamically show a table with a JSON element but in a format that is hard to do with tables. I'm using AngularJs 1.6.4 and Bootstrap but I'm kind of new at Angular. My JSON:-
"foo": {
"name": "foo",
"displayName": "FOO SHOW",
"environments": [
{
"id": "one",
"name": "PROD",
"url": "http://my-prod-url.com"
},
{
"id": "two",
"name": "QA",
"url": "http://my-qa-url.com"
},
{
"id": "three",
"name": "DEV",
"url": "http://my-dev-url.com"
}
]
},
"bar": {
"name": "bar",
"displayName": "BAR SHOW",
"environments": [
{
"id": "four",
"name": "PROD",
"url": "https://my-prod2-url.com"
},
{
"id": "five",
"name": "QA",
"url": "https://my-uat2-url.com"
},
{
"id": "six",
"name": "DEV",
"url": "https://my-dev2-url.com"
}
]
}
I want to display this in a way that dynamically shows everything but based on application on the top and environment on the left of a table. For example:-
ENV | FOO | BAR
PROD| fooProdUrl| barProdUrl
QA | fooQaUrl| barQaUrl
DEV | fooDevUrl| barDevUrl
I've tried this but it's not dynamic and it doesn't display in the order I want:-
<table class="table">
<thead>
<tr>
<th class="text-center">Environment</th>
<th class="text-center" data-ng-repeat="list in applications">{{list.displayName}}</th>
</tr>
</thead>
<tbody class="text-center">
<tr data-ng-repeat="list in applications">
<th class="text-center">
{{list.environments[0].name}} and {{list.name}}
</th>
<td>
{{list.environments[0].url}} and {{list.name}} and {{list.environments[0].name}}
</td>
<td>
{{list.environments[1].url}} and {{list.name}} and {{list.environments[1].name}}
</td>
</tr>
</tbody>
</table>
This displays it in rows but not in the column way I want it.
Should I reorganize my JSON object? Split it in a different way? I've been stuck for a little bit on this.
Thanks!
I want to fill a table from a json file using AngularJS.
json file may vary from time to time (dynamic data).
Requirement is: Fill the table in html by parsing json file.
Table is in view.html file and AngularJS code should be in view.js.
JSON file: (there may be even more no of id's under services tree)
{
"result": {
"services": [
{
"id": 1,
"name": "My UI for some project that I'm doing that won't fit",
"application": "app",
"message": "application",
"status": 1
},
{
"id": 2,
"name": "My DB for some project that I'm doing",
"application": "app1",
"message": "application1",
"status": 3
},
{
"id": 3,
"name": "Another service",
"application": "app2",
"message": "application2",
"status": 3
}
],
}
}
The output table should look like:
PS: the table alignment should be set as the name value may or may not has more info.
Thanks
Although, like #Johannes Jander saying, Stackoverflow is not a "write my code for me" service I will show you how to do this.
If you don't mind that the order of the columns will be different, you can easily iterate throw the object's properties and you wouldn't need to manipulate the json object. If the order is important, let me know and I will help you to figure it out.
To read more about what we have here please follow those links:
ng-repeat docs.
How can I iterate over the keys, value in ng-repeat in angular
Now, to the code:
angular.module('app', []).
controller('ctrl', function($scope) {
$scope.json = {
"result": {
"services": [
{
"id": 1,
"name": "My UI for some project that I'm doing that won't fit",
"application": "app",
"message": "application",
"status": 1
},
{
"id": 2,
"name": "My DB for some project that I'm doing",
"application": "app1",
"message": "application1",
"status": 3
},
{
"id": 3,
"name": "Another service",
"application": "app2",
"message": "application2",
"status": 3
}
],
}
}
});
table {
border-collapse: collapse;
}
td {
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="ctrl">
<table data-ng-if="json.result.services.length > 0">
<thead>
<tr>
<th data-ng-repeat="(key, value) in json.result.services[0]" data-ng-bind="key"></th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="service in json.result.services">
<td data-ng-repeat="(key, value) in service" data-ng-bind="value"></td>
</tr>
</tbody>
</table>
</div>
DEMO
I have following array : -
var data = [{
"recordno": "001",
"firstname": "Brock",
"middlename": "Edward",
"lastname": "Lesnar",
"gender": "male",
"dateofbirth": "1980-01-01T20:20:19.198Z",
"dateofdeath": null,
"status": "archive"
}, {
"recordno": "002",
"firstname": "John",
"middlename": "E",
"lastname": "Cena",
"gender": "male",
"dateofbirth": "1980-01-01T20:20:19.198Z",
"dateofdeath": null,
"status": "archive"
}];
I want to show it in Table format in my HTML. My issue is the table header & the row data do not match. You can check the fiddle for demo.
What i am doing wrong?
You don't have to do anything in the function.
JS FIDDLE UPDATE
JS
function TableController($scope) {
$scope.rows = data;
}
HTML
<div ng-app="" ng-controller="TableController">
<table>
<tr>
<th ng-repeat='(key, value) in rows[0]'>{{key}}</th>
</tr>
<tr ng-repeat='row in rows'>
<td ng-repeat='cell in row'>{{cell}}</td>
</tr>
</table>
</div>