I am getting dynamic content from database and I want to to view index value like..1,2,3,4,5,6,7 and so on.
I am using {{ #index }} and {{ index }} but it is not working for me.
<template name="getDynamic">
<table class="table table-bordered table-striped">
<thead>
<tr>
<td>First Name</td>
<td>last Name</td>
<td>Email</td>
<td>password</td>
<td>Gender</td>
<td>Trems</td>
<td>Actions</td>
</tr>
</thead>
<tbody>
{{#each listalltests}} {{> list }} {{/each}}
</tbody>
</table>
</template>
<template name="list">
<tr>
<td> {{#index}} </td> // not working
<td> {{ username }} </td>
<td> {{ lastname }} </td>
<td> {{ email }} </td>
<td> {{ password }} </td>
<td> {{ gender }} </td>
<td> {{ terms }} </td>
<td>[Delete] </td>
<!-- <td>[Update] </td> -->
</tr>
</template>
Is there a way to access array index in spacebars In meteor?
Your list template does not know about #index so you need to pass it to the template.
You need therefore to call it like so
{{ > list index=#index }}
Of course you then need to change your code in the list template to access the item data:
<td>{{index}}</td>
Related
Newb to AnjularJS, searches turned up a lot of similar questions, but nothing seems to fit. This prototype is pretty simple, ng-repeat on a table row, but the ng-repeat is showing 5 blank table rows, I'm expecting just one. My sample json checks out on JSONlint, and I can console.log it just fine.
I've got a simple html template, js, and php app I'm prototyping. code and screen grabs below.
SCREEN GRAB:
angular.module('showcontent', [])
.controller('showcontentController', ['$scope', '$http', function ($scope, $http)
{
$http.get('controller.php')
.then (function(data)
{
$scope.showcontents = data;
console.log("\nhttp get returned data :: \n"+JSON.stringify(data));
console.log("\n\n"+$scope.showcontents.data[0].ticket+"\n");
});
}]);
<body ng-app="showcontent">
<div class="container-fluid">
<div class="row">
<div ng-controller="showcontentController">
<table>
<thead>
<tr>
<th>TICKET</th>
<th>SHOW</th>
<th>SEASON</th>
<th>EPISODE</th>
<th>PROVIDER</th>
<th>MISSINGFROM</th>
<th>FIXAGENTTICKET</th>
<th>ACTUAL_START</th>
<th>ACTUAL_END</th>
<th>STATUS</th>
<th>ELEMENT</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="showcontent in showcontents">
<td {{ showcontent.ticket }} </td>
<td {{ showcontent.show }} </td>
<td {{ showcontent.season }} </td>
<td {{ showcontent.episode }} </td>
<td {{ showcontent.provider }} </td>
<td {{ showcontent.missingfrom }} </td>
<td {{ showcontent.fixagentticket }} </td>
<td {{ showcontent.actual_start }} </td>
<td {{ showcontent.actual_end }} </td>
<td {{ showcontent.status }} </td>
<td {{ showcontent.element }} </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
PHP CODE(controller.php)
<?php
header('Content-Type: application/json');
$vodContent='[{"ticket": "SI999999999","show": "The New Big Show","season": "1","episode": "1","provider": "cable","missingfrom": "AllX1","fixagentticket": "INC999999999","actual_start": "01-NOV-17","actual_end": "","status": "Working","element": "The Big New Show 1000HD"}]';
echo $vodContent;
?>
It looks like your HTML is not properly formatted. Try closing your td tags:
<td> {{ showcontent.ticket }} </td>
instead of
<td {{ showcontent.ticket }} </td>
Also, you may need to access the data property of your response object:
$scope.showcontents = data.data;
I'm trying to do a table with ng-repeat. This is my code
<table class="tab2" >
<thead>
<tr>
<th>Currency: USD '000s</th>
<th ng-repeat="s in periodosCF">{{s.periodo | date:"yyyy"}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in nombreFilasCF" class="{{n.fondo}}">
<td style="width: 32%;"><div class="bordeTab">
<div class="{{n.color}}First" >
{{n.nombre}}
</div> <br>
</div>
</td>
<td ng-repeat="dato in datosCF" ng-if="n.nombre == dato.nombre">
<div class="{{n.color}}" >
{{dato.valor}}
</div><br>
</td>
</tr>
</tbody>
</table>
Once it enter to this ng-repeat="dato in datosCF", I do and if to print a value, but if the if returns me false I need to print this "-".
It sounds like you want to include all rows, but the content of the row is different based on some condition. If that's the case, you can try moving the conditional logic into the body of your <td> element, and having two divs with contradictory ng-if expressions:
<table class="tab2" >
<thead>
<tr>
<th>Currency: USD '000s</th>
<th ng-repeat="s in periodosCF">{{s.periodo | date:"yyyy"}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in nombreFilasCF" ng-class="n.fondo">
<td style="width: 32%;"><div class="bordeTab">
<div ng-class="n.color + 'First'">
{{n.nombre}}
</div> <br>
</div>
</td>
<td ng-repeat="dato in datosCF">
<div ng-if="n.nombre === dato.nombre" ng-class="n.color">
{{dato.valor}}
</div>
<div ng-if="n.nombre !== dato.nombre">
-
</div><br>
</td>
</tr>
</tbody>
</table>
I also changed your interpolated class attributes to ng-class.
how to execute below type code in angular js
<tr ng-repeat="x in gLists" >
<td ng-repeat="z in gfLists" >{{ 'x.'+{{z.field}}} </td>
</tr>`
This is your code
<tr ng-repeat="x in gLists" >
<td ng-repeat="z in gfLists">{{ 'x.'+ z.field }} </td>
</tr>
Use bracket notation for the property accessor:
<!--
<tr ng-repeat="x in gLists" >
<td ng-repeat="z in gfLists" >{{ 'x.'+{{z.field}}} </td>
</tr>
-->
<tr ng-repeat="x in gLists" >
<td ng-repeat="z in gfLists" >{{ x[z.field] }} </td>
</tr>
Bracket notation first evaluates the contents of the brackets and uses that as the identifier of the desired property.
I have a form where I want the user to be able to enter in search terms into textboxes, and then click a button to search the list. Is it possible to do something like this with ng-repeat and a button click? I'm really new to Angular, and I'm unsure if I can use it for this type of functionality. I have a little bit of code:
HTML
<div>
<input ng-model="filterSearch.address" />
<input ng-model="filterSearch.city" />
<button ng-click="">Search</button>
<table>
<thead>
<tr>
<th>
Address
</th>
<th>
City
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="search in vm.searches | filter: filterSearch">
<td>
{{ search.address }}
</td>
<td>
{{ search.city }}
</td>
</tr>
</tbody>
</table>
Controller:
(function () {
'use strict'
angular
.module('crm.ma')
.controller('AdvancedSearchCtrl', AdvancedSearchCtrl);
function AdvancedSearchCtrl() {
var vm = this;
vm.searches = [
{
"address": "202 This St",
"city": "Columbus"
},
{
"address": "205 That St",
"city": "Dayton"
}
];
}
})();
If anyone could point me in the right direction that would be great. Thanks.
Updated code:
<div>
<input ng-model="searchModel.address" />
<input ng-model="searchModel.city" />
<button ng-click="filterSearch = searchModel">Search</button>
<table>
<thead>
<tr>
<th>
Address
</th>
<th>
City
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="search in vm.searches | filter:{'address': filterSearch.address, 'city': filterSearch.city}">
<td>
{{ search.address }}
</td>
<td>
{{ search.city }}
</td>
</tr>
</tbody>
</table>
You can specify fields to search on like:
<tr ng-repeat="search in vm.searches | filter:{'address': filterSearch.address, 'city': filterSearch.city">
<td>
{{ search.address }}
</td>
<td>
{{ search.city }}
</td>
</tr>
And if you need the on-click to trigger the search, you can just use something like:
ng-click="filterSearch = searchModel"
And change your inputs to use the searchModel variable.
I'm loading a large amount of data using ng-include.
I'd like to know if there is a way to know when a template is "rendered", because sometimes it seems like it's been "frozen", because I want to do a "loading screen" or something.
Thx.
Here's the code
controller code:
$scope.layout = {
current: 'single-table.html'
};
$scope.layout.get = function() {
return $scope.layout.current;
};
templates:
main.html
<div class="btn-group">
<button ng-click="layout.current = 'single-table.html'">Single</button>
<button ng-click="layout.current = 'multiple-table.html'">Multiple</button>
</div>
<div ng-include="layout.get()"></div>
single-table.html
<table class="table table-bordered">
<thead>
<th ng-repeat="column in columns">{{ column.title }}</th>
</thead>
<tbody>
<tr ng-repeat="record in records">
<td ng-repeat="field in record.fields"
ng-controller="FieldController"
ng-class="getClass()">
{{ field.display }}
</td>
</tr>
</tbody>
</table>
multiple-table.html
<table class="table table-bordered" ng-repeat="record in records">
<tbody>
<tr ng-repeat="field in record.fields">
<th>{{ columns[$index].title }}</th>
<td ng-controller="FieldController" ng-class="getClass()">
{{ field.display }}
</td>
</tr>
</tbody>
</table>
EDIT
I'm using version 1.2.0
One solution (probably not the best) is doing this (no ng-include)
<table class="table table-bordered" ng-show="layout.current == 'single-table.html'">
<thead>
<th ng-repeat="column in columns">{{ column.title }}</th>
</thead>
<tbody>
<tr ng-repeat="record in records">
<td ng-repeat="field in record.fields"
ng-controller="FieldController"
ng-class="getClass()">
<span lud-run="{{ field.ng_directive }}"></span>
</td>
</tr>
</tbody>
</table>
<table class="table table-bordered" ng-repeat="record in records" ng-show="layout.current == 'multiple-table.html'">
<tbody>
<tr ng-repeat="field in record.fields">
<th>{{ columns[$index].title }}</th>
<td ng-controller="FieldController" ng-class="getClass()">
<span lud-run="{{ field.ng_directive }}"></span>
</td>
</tr>
</tbody>
</table>
I have only 20 records, but (is not in the code), each cells loads a custom directive depends on the data type (string, date, datetime, image...). This "solution" I think runs the same data twice (ng-show, not ng-if), but when a switch the layout mode there is no "lag".
You can use the onload hook on ng-include to update a variable when the include has finished rendering. If you set it to true on clicking your button, then revert it back to false in onload, you should be able to leverage it to temporarily display a loading screen.