AngularJS - ng-repeat of rows inside tables

AngularJS - ng-repeat of rows inside tables - angularjs

AngularJS - ng-repeat & $http.get
Edit: Tried using unique, also did not work:
<table class="table" ng-controller="fetchData">
<tr ng-repeat="elements in rawData.value">
<th ng-repeat="(key, value) in elements | unique:'key'">
{{key}}
</th>
<td ng-repeat="element in elements">
{{ element }}
</td>
</tr>
</table>
I'm filling tables with external information using ng-repeat, but I am struggling with filling the headers. I found an example to extract the keys:
<td ng-repeat="(key, element) in elements">
However, this does not help me as I should fill the th just one time, over the data, not beside it. I also tried adding an additional ng-repeat, to no avail.
Regaring $http.get and ODATA-sources - is there any way to populate the table with all available data at once? Or anywhere I can read which tokens are accepted (did not find any information when googling)? Right now I'm only geting a max of 11 elements - and I'm not allowed to add the token to the URL the way I am doing at the moment. Is there a better way to fetch the data? Any pointers would be appreciated, please let me know if additional information is needed. This is the code:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ODataResources/1.0.25/odataresources.min.js"></script>
<link rel="stylesheet" href="/css/style.css">
</head>
<script>
const BASE_URL = 'http://services.odata.org/V3/OData/OData.svc/';
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var app = angular.module('getData', []);
app.controller('fetchLinks', function($scope, $http) {
$http.get(BASE_URL)
.then(function(response) {
$scope.rawLinks = response.data;
});
});
app.controller('fetchData', function($scope, $http) {
let dynamicContent = getParameterByName('q');
console.log(BASE_URL+dynamicContent);
$http.get(BASE_URL+dynamicContent)
.then(function(response) {
$scope.rawData = response.data;
});
});
</script>
<body ng-app="getData">
<div class="container main-container">
<div class="row">
<div class="col menu">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul>
<div ng-controller="fetchLinks">
<li class="nav-item" ng-repeat="element in rawLinks.value">
<a class="nav-link" href="?q={{ element.url }}">{{ element.name }}</a>
</li>
</div>
</ul>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-md-12 content">
<table class="table" ng-controller="fetchData">
<tr ng-repeat="elements in rawData.value">
<td ng-repeat="element in elements">
{{ element }}
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>

To repeat multiple rows, use the Special Repeat Start and End Points:
<table class="table" ng-controller="fetchData">
<tr ng-repeat-start="elements in rawData.value">
<th ng-repeat="(key, value) in elements>
{{key}}
</th>
</tr>
<tr ng-repeat-end>
<td ng-repeat="element in elements">
{{ element }}
</td>
</tr>
</table>
This will repeat two rows; the first with keys and the second with values.
Your code does almost what I wanted to achieve, so I added an ng-if="$first" to the ng-repeat-start line
If your goal is to create only one header row, it is more efficient to do it as:
<table class="table" ng-controller="fetchData">
<tr>
<th ng-repeat="(key, value) in rawData.value[0]">
{{key}}
</th>
</tr>
<tr ng-repeat="elements in rawData.value">
<td ng-repeat="element in elements">
{{ element }}
</td>
</tr>
</table>
This avoids all the overhead with evaluating multiple ng-if expressions. It also assumes that every object in the rawData.value array has the same keys.

Related

I have this problem on how to repeat the table inside the ng-repeat based on the field value

I have this problem on how to repeat the table inside the ng-repeat based on the field[rm_count_rack] value
See below the sample and possible outcome.
this is my database.
This is the display of ng-repeat="i in room"
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" ng-repeat="i in room" >
<br>
<table class="column"> **<!-- need to repeat this table based on the
value of i.rm_count_rack** -->
<th colspan="{{i.rm_subbin}}" class="text-center">RACK A</th>
<tbody >
<tr>
<td ><a style="width: 100%" href="javascript:void(0)" class="btn btn-info"><span>1A62</span></a></td>
<td><a style="width: 100%" href="javascript:void(0)" class="btn btn-success"><span>1A62</span></a></td>
<td><a style="width: 100%" href="javascript:void(0)" class="btn btn-danger"><span>1A62</span></a></td>
</tr>
</tbody>
</table>
</div>
This should be the output:

Since ng-repeat only accepts a collection as a parameter. You could try:
<table class="column" ng-repeat="x in [].constructor(i.rm_count_rack) track by $index">
Or
<table class="column" ng-repeat="x in getNumber(i.rm_count_rack)">
And inside your controller
$scope.getNumber = function(num) {
return new Array(num);
}

ServiceNow Service Portal AngularJS Accordian Widget Not Working

I am new to serviceNow and trying to create an Accordian Widget to display information in a table grouped by ProjectName.
When I run this code in the Widget Editor the the accordian comes up but {{mytable.id}} is not populating and only the Project Names are displaying.
Also, only the top project name is collapsing/opening which I think is attributed to the non-unique id.
I do not know how to fix this.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="panel-group" id="accordian">
<div class="panel panel-{{mytable.id}}" ng-repeat="mytable in data.mytables">
<div class="panel-heading" role="tab" id="heading_{{::mytable.pid}}">
<div class="panel-group" id="accordian">
<div class="panel panel-{{mytable.id}}" ng-repeat="mytable in data.mytables">
<div class="panel-heading" role="tab" id="heading_{{::mytable.pid}}">
<span class=”panel-title”>
<a role=”button” data-toggle=”collapse” href=”#collapse_{{mytable.id}}” aria-expanded=”true” aria-controls=”collapse_{{::mytable.id}}”>
<i class=”fa fa-chevron-down”></i>{{::mytable.project_name}} <span class=”badge”>{{::mytable.count}}</span>
</a>
</span>
</div>
<div id=”#collapse_{{::mytable.id}}” class=”panel-collapse collapse” role=”tabpanel” aria-labelledby=”heading_{{::mytable.id}}”>
<div class=”panel-body”>
<table class=”table”>
<thead>
<tr>
<th>Month</th>
<th>Year</th>
<th>PDF</th>
<th>XLS</th>
<th>
</thead>
<tbody>
<tr>
<td>{{::mytable.invoice_month}}</td>
<td>{{::mytable.invoice_year}}</td>
<td>{{::mytable.pdf}}</td>
<td>{{::mytable.xls}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
/*Client Script*/
function($scope){
var c = this;
}
/*Service Script*/
(function() {
data.mytables = [];
var gr = new GlideAggregate('x_project_table');
gr.addActiveQuery();
gr.groupBy('project_name');
gr.query();
while(gr.next()){
var mytable = {};
mytable.project_name = gr.getDisplayValue('project_name');
mytable.invoice_month = gr.getDisplayValue('invoice_month');
mytable.invoice_year = gr.getDisplayValue('invoice_year');
mytable.pdf = gr.getDisplayValue('pdf');
mytable.xls = gr.getDisplayValue('xls');
data.mytables.push(mytable);
}
})();

{{mytable.id}} is not populating because you didn't specify it in your server script.
You need something like mytable.id= gr.getValue('sys_id');

can not show angular apps data in django template

Please help me to solve this problem.This angular code works locally but can not work in django template.
I call this static files end of the body of base.html
<script src="{% static "js/angular.min.js" %}"></script>
<script src="{% static "js/restangular.min.js" %}"></script>
<script src="{% static "js/angular-ui-router.min.js" %}"></script>
This is contactlist.html
<div id="contactlist" ng-app="newApp">
<div class="container" ng-controller="angCtrl">
<h1 class="text-center">Search contact for {{myModel}}</h1>
<form>
<div class="input-group">
<input type="text" class="form-control" ng-model="myModel"
placeholder="Search Contact">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</form>
<div class="all">
<table class="table table-hover text-center">
<thead>
<tr>
<th class="text-center">Id</th>
<th class="text-center">Name</th>
<th class="text-center">Contact Number</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contactlist | filter:myModel |
orderBy: 'name'">
<td>{{contact.id}}</td>
<td>{{contact.name}}</td>
<td>{{contact.contact}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
This is app.js
var app = angular.module('newApp', []);
app.controller('angCtrl', function($scope) {
$scope.name = "";
});
app.controller('angCtrl', function($scope) {
$scope.contactlist = [
{id:'1',name:'raisul',contact:'+8801723844330'},
{id:'2',name:'Rafikul',contact:'+8801723564330'},
{id:'3',name:'Shariful',contact:'+8801726864330'},
{id:'4',name:'kamarul',contact:'+8801723764330'},
{id:'5',name:'Ashraful',contact:'+8801728864330'},
{id:'6',name:'Jamarul',contact:'+8801723964330'},
{id:'7',name:'Rahul',contact:'+8801723861330'},
{id:'8',name:'Rashidul',contact:'+8801725864330'},
]
});
It shows the table element but can not show any data

How Do i Filter JSON Array Using Checkboxes with AngularJS?

I have the following code where i'm trying to filter on the product array by checking a checkbox,but in my case list is not filtered click on the checkbox,i have set the value of city in the value of the checkbox,but list is not filtered?
//here we create the product array and display the array in the HTML page.
var app=angular.module("myApp",[]);
app.controller("myCont",function($scope){
var product = [
{pid:"110",ename:"Harry",esalary:"25000",ecity:"Agar"},
{pid:"109",ename:"potter",esalary:"11000",ecity:"US"},
{pid:"101",ename:"Peter",esalary:"1200",ecity:"London"},
{pid:"104",ename:"Janifer",esalary:"12000",ecity:"Bejing"},
{pid:"103",ename:"Selena",esalary:"35000",ecity:"England"},
{pid:"102",ename:"Lokesh",esalary:"32500",ecity:"Malwa"},
{pid:"108",ename:"Gotm",esalary:"8910",ecity:"Ujain"},
{pid:"106",ename:"Soni",esalary:"16000",ecity:"bhopal"},
{pid:"110",ename:"Harry",esalary:"25000",ecity:"Agar"},
{pid:"109",ename:"potter",esalary:"11000",ecity:"US"},
{pid:"101",ename:"Peter",esalary:"1200",ecity:"London"},
{pid:"104",ename:"Janifer",esalary:"12000",ecity:"Bejing"}
]
$scope.products=product;
});
<html>
<head>
<script src="angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script src="controller.js"></script>
</head>
<style>
#count
{
color: blue;
}
#search
{
background-color: LightBlue;
}
</style>
<div class="funkyradio">
<div class="funkyradio-default">
<input type="checkbox" Agar/>
<label for="checkbox1">First Option default</label>
</div>
<div class="funkyradio-primary">
<input type="checkbox" data-ng-model='search.type1' data-ng-true-value="'US'" data-ng-false-value=''/>US
<label for="checkbox2">Second Option primary</label>
</div>
</div>
</div>
<body ng-app="myApp" ng-controller="myCont">
<form align="center">
//Search tab for all array
Search Here<input type="text" name="uname"
ng-model="search" placeholder=" Enter data">
Hide Salary <input type="checkbox" ng-model="hideSalary">
<table class="table table-hover" align="center" border="2">
<thead id="search">
<tr>
<th>pid</th>
<th>ename</th>
<th ng-hide="hideSalary">esalary</th>
<th>
ecity
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in filtered = (products | filter:search) | filter:search.type1 | orderBy:'ename'">
<td>{{x.pid}}</td>
<td>{{x.ename | uppercase}}</td>
<td ng-hide="hideSalary">{{x.esalary }}</td>
<td>{{x.ecity}}</td>
</tr>
</tbody>
</table>
<span id="count">
<hr>
Filtered list has {{filtered.length}} items
</span>
</form>
</body>
</html>

How to print array object in table row using nested ng-repeat in angular.js dynamically?

I am using angular.js for font-end and node.js for server side.
Now, I am having some list of values in array randomly.
Html code :
<html ng-app='app' ng-controller='mainController'>
<head>
</head>
<body>
<div class="container">
<div class="jumbotron">
<table>
<tr ng-show="reports.length!=0" ng-repeat="report in reports">
<td class="tblheadcol">{{report.first_name}}</td>
<td class="" style="padding-left:10px;">{{report.emp_id}}</td>
<td class="" style="padding-left:10px;">{{report.month_calendar_days}}</td>
<td class="" style="padding-left:10px;">{{report.pay_days}}</td>
<td class="" style="padding-left:10px;">{{report.paid_days}}</td>
<td ng-show="$index > 4" ng-repeat="val in report" style="padding-left:10px;">{{val}}</td>
</tr>
</table>
</div>
</div>
<pre>{{ cleanData | json}}</pre>
</body>
</html>
Controller code :
angular.module('app', [])
.controller('mainController', ['$scope', '$filter', function($scope, $filter) {
$scope.reports = [{"emp_id":"10001","first_name":"siva","status":1,"month_calendar_days":29,"pay_days":29,"paid_days":21,"salary_head_value1":0,"salary_head_value2":7550,"salary_head_value3":1600,"salary_head_value4":1800,"salary_head_value5":345,"salary_head_value6":6400,"salary_head_value7":5000,"salary_head_value8":31955,"salary_head_value9":1250,"salary_head_value10":12000,"salary_head_value11":6000,"salary_head_value12":47900,"salary_head_value13":15945,"salary_head_value14":4000,"salary_head_value15":2400},{"emp_id":"10002","first_name":"naren","status":1,"month_calendar_days":29,"pay_days":29,"paid_days":21,"salary_head_value1":15501,"salary_head_value2":7551,"salary_head_value3":1601,"salary_head_value4":1801,"salary_head_value5":346,"salary_head_value6":6401,"salary_head_value7":5001,"salary_head_value8":31957,"salary_head_value9":1251,"salary_head_value10":12001,"salary_head_value11":6001,"salary_head_value12":47907,"salary_head_value13":15950,"salary_head_value14":4001,"salary_head_value15":2401},{"emp_id":"10003","first_name":"Bhaki","status":1,"month_calendar_days":29,"pay_days":29,"paid_days":21,"salary_head_value1":15502,"salary_head_value2":7552,"salary_head_value3":1602,"salary_head_value4":1802,"salary_head_value5":347,"salary_head_value6":6402,"salary_head_value7":5002,"salary_head_value8":31959,"salary_head_value9":1252,"salary_head_value10":12002,"salary_head_value11":6002,"salary_head_value12":47914,"salary_head_value13":15955,"salary_head_value14":4002,"salary_head_value15":2402}];
}]);
Output:
Expected Result :
In the above output i want to print the marked result in sequence order as per the array in controller.
Then first five field code
<td class="tblheadcol">{{report.first_name}}</td>
<td class="" style="padding-left:10px;">{{report.emp_id}}</td>
<td class="" style="padding-left:10px;">{{report.month_calendar_days}}</td>
<td class="" style="padding-left:10px;">{{report.pay_days}}</td>
<td class="" style="padding-left:10px;">{{report.paid_days}}</td>
should not be change and remaining <td ng-show="$index > 4" ng-repeat="val in report" style="padding-left:10px;">{{val}}</td>
should use in ng-repeat.

ng-repeat orders objects alphabetically by default.
If you want to avoid that you can use:
$scope.noAlphabetSortPlease = function(obj){
return Object.keys(obj);
}
And in your HTML:
<td ng-show="$index > 5" ng-repeat="key in noAlphabetSortPlease(report)" style="padding-left:10px;">{{report[key]}}</td>
Working snippet:
angular.module('app', [])
.controller('mainController', ['$scope', '$filter', function($scope, $filter) {
$scope.noAlphabetSortPlease = function(obj){
return Object.keys(obj);
}
$scope.reports = [{"emp_id":"10001","first_name":"siva","status":1,"month_calendar_days":29,"pay_days":29,"paid_days":21,"salary_head_value1":0,"salary_head_value2":7550,"salary_head_value3":1600,"salary_head_value4":1800,"salary_head_value5":345,"salary_head_value6":6400,"salary_head_value7":5000,"salary_head_value8":31955,"salary_head_value9":1250,"salary_head_value10":12000,"salary_head_value11":6000,"salary_head_value12":47900,"salary_head_value13":15945,"salary_head_value14":4000,"salary_head_value15":2400},{"emp_id":"10002","first_name":"naren","status":1,"month_calendar_days":29,"pay_days":29,"paid_days":21,"salary_head_value1":15501,"salary_head_value2":7551,"salary_head_value3":1601,"salary_head_value4":1801,"salary_head_value5":346,"salary_head_value6":6401,"salary_head_value7":5001,"salary_head_value8":31957,"salary_head_value9":1251,"salary_head_value10":12001,"salary_head_value11":6001,"salary_head_value12":47907,"salary_head_value13":15950,"salary_head_value14":4001,"salary_head_value15":2401},{"emp_id":"10003","first_name":"Bhaki","status":1,"month_calendar_days":29,"pay_days":29,"paid_days":21,"salary_head_value1":15502,"salary_head_value2":7552,"salary_head_value3":1602,"salary_head_value4":1802,"salary_head_value5":347,"salary_head_value6":6402,"salary_head_value7":5002,"salary_head_value8":31959,"salary_head_value9":1252,"salary_head_value10":12002,"salary_head_value11":6002,"salary_head_value12":47914,"salary_head_value13":15955,"salary_head_value14":4002,"salary_head_value15":2402}];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app='app' ng-controller='mainController'>
<head>
</head>
<body>
<div class="container">
<div class="jumbotron">
<table>
<tr ng-show="reports.length!=0" ng-repeat="report in reports">
<td class="tblheadcol">{{report.first_name}}</td>
<td class="" style="padding-left:10px;">{{report.emp_id}}</td>
<td class="" style="padding-left:10px;">{{report.month_calendar_days}}</td>
<td class="" style="padding-left:10px;">{{report.pay_days}}</td>
<td class="" style="padding-left:10px;">{{report.paid_days}}</td>
<td ng-show="$index > 5" ng-repeat="key in noAlphabetSortPlease(report)" style="padding-left:10px;">{{report[key]}}</td>
</tr>
</table>
</div>
</div>
<pre>{{ cleanData | json}}</pre>
</body>
</html>