New to AngularJS. I am trying to make 4 buttons.when user will click on button, a specific div will be displayed hiding other 3 DIVs.
Here is the code,
<div class="active">
<button ng-click="a"><h5>Button a</h5></button>
</div>
<div>
<button ng-click="b"><h5>Button b</h5></button>
</div>
<div><button ng-click="c"><h5>Button c</h5></button>
</div>
<div>
<button ng-click="d"><h5>Button d</h5></button>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th class="browser-icons"></th>
<th>Name</th>
<th class="align-right">Product ID</th>
<th class="align-right">SKU ID</th>
<th class="align-right">Seller Panel</th>
<th class="align-right">Payment Medium</th>
<th class="align-right">Quantity</th>
<th class="align-right">Price</th>
<th class="align-right">Status</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of metricsTableData" ng-if="a">
<td><img class="tableimg" src="{{ ( item.image | baAppPicture )}}" width="100" height="100"></td>
<td ngClass="nowrap">{{ item.browser }}</td>
<td class="align-right">{{ item.visits }}</td>
<td class="align-right">{{ item.purchases }}</td>
<td class="align-right">{{ item.percent }}</td>
<td class="align-right">{{ item.pmedium }}</td>
<td class="align-right">{{ item.quantity }}</td>
<td class="align-right">{{ item.price }}</td>
<td class="align-right">{{ item.status }}</td>
</tr>
<tr *ngFor="let item of metricsTableData1" ng-if="b">
<td><img class="tableimg" src="{{ ( item.image | baAppPicture )}}" width="100" height="100"></td>
<td ngClass="nowrap">{{ item.browser }}</td>
<td class="align-right">{{ item.visits }}</td>
<td class="align-right">{{ item.purchases }}</td>
<td class="align-right">{{ item.percent }}</td>
<td class="align-right">{{ item.pmedium }}</td>
<td class="align-right">{{ item.quantity }}</td>
<td class="align-right">{{ item.price }}</td>
<td class="align-right">{{ item.status }}</td>
</tr>
</tbody>
</table>
Thanks in Advance.
First thing that you will need to do is ensure those ng-clicks have parentheses to call methods on your controller/scope (e.g. ng-click="c()")
If you do have a method called c on your controller/scope you can set a value (for example you may have a property called index, which is set to the value of whichever div is currently active).
Each div would have ng-if="index == x", where x is the index of the div.
It's a rudimentary way of achieving what you need, but should be adequate. Briefly:
<button ng-click="d()"><h5>Button d</h5></button>
var d = function() { index = 4; }
$scope.d = d;
<div ng-if="index == 4">Shown when button d clicked</div>
Related
I'm using ng-zorro with Angular to show pagination in a table with data from a REST API request.
But when I add the ng-template (#rangeTemplate) to show the request total items, the next and previous buttons of pagination don't work anymore (it brakes the GET request).
<nz-table #searchResultUsersTable
[nzPageIndex]="pageIndex"
[nzPageSize]="pageSize"
[nzShowTotal]="rangeTemplate"
[nzData]="curedUserList"
[nzTotal]="totalUser"
nzShowSizeChanger="true"
[nzPageSizeOptions]="pageSizeOptions"
nzFrontPagination="false"
nzPaginationPosition="bottom"
[nzScroll]="{ y: '500px' }"
(nzQueryParams)="onQueryParamsChange($event)"
[nzNoResult]="emptyTable">
<thead>
<tr>
<th>Auth0 ID</th>
<th nzColumnKey="last_login" [nzSortFn]="true">{{ 'SEARCH.RESULT.COLUMN-LAST-LOGIN' | translate }}</th>
<th nzColumnKey="email" [nzSortFn]="true">{{ 'SEARCH.RESULT.COLUMN-EMAIL' | translate }}</th>
<th>Applications</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of searchResultUsersTable.data">
<td>{{ data.auth0Id }}</td>
<td>{{ data.last_login | date }}</td>
<td>{{ data.email }}</td>
<td>{{ data.app }}</td>
</tr>
</tbody>
<ng-template #rangeTemplate let-range="range" let-total>
{{ range[0] }}-{{ range[1] }} of {{ total }} items
</ng-template>
</nz-table>
Anybody knows how to fix it?
I have data returned from api with this format :
[
{
"game": "Among Us",
"playTime": 5000,
"genre": "Multiplayer",
"platforms": [
"PC",
"Android"
]
}
]
I'm showing it into bootstrap table, but the platforms content won't be displaying ! how to loop for it ?
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Game</th>
<th scope="col" sortable="name">Genre</th>
<th scope="col" sortable="area">Plateforms</th>
<th scope="col" sortable="population">Total play time</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let game of topGamesUsers">
<td>
{{ game.game }}
</td>
<td>{{ game.genre }}</td>
<td>{{ game.plateforms }}</td>
<td>{{ game.users }}</td>
</tr>
</tbody>
</table>
should I store them into another variable or I can do this in html file ?
You can show it as a comma separated string in the row by using =>
<td>{{ game.platforms.join() }}</td>
You can try like this.
<td>
<div *ngFor="let platform of game.platforms"></div>
</td>
I want to display number of records of AngularJS , sample "1 to 10 of 15 records". Everything is working and I want to apply the page number. I'm using dir-paginate AngularJS , Is there easy way to achieve this? really appreciate your help. Here is my code:
HTML CODE:
<table class="primary-table">
<thead>
<tr>
<th>Username</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Contact Number</th>
<th>Address</th>
<th>Position</th>
<th>Status</th>
<th>Date Added</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody class="tbodyrow">
<tr ng-if="members.length==0"><td colspan="11">No Records</td></tr>
<tr ng-if="members.length>0" dir-paginate="member in members|orderBy:sortKey:reverse|filter:search|itemsPerPage:5">
<td>{{ member.username }}</td>
<td>{{ member.first_name }}</td>
<td>{{ member.last_name }}</td>
<td>{{ member.email }}</td>
<td>{{ member.contact }}</td>
<td>{{ member.address }}</td>
<td>{{ member.position }}</td>
<td>{{ member.status }}</td>
<td>{{ member.dateadded }}</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
<tfoot class="tfootrow">
<tr>
<td colspan="11">
<div class="grid2">
<div><!--number of records info here--></div>
<div>
<dir-pagination-controls max-size="5"
direction-links="true" boundary-links="true" >
</dir-pagination-controls>
</div>
</div>
</td>
</tr>
</tfoot>
</table>
JS CODE:
angular.module('app', ['angularUtils.directives.dirPagination']);
angular.module('app').controller('AdminController', function($scope, $http){
this.fetch = function(){
$http.get("../Ajax/Administrator/fetch.php").then(function (response) {
$scope.members = response.data;
});
}
});
Since you already know the page size you can use a model variable to assign the value and access the total lentgh of the array using array.length
<h3> 1 to {{ pageSize }} of {{members.length}} records</h3>
DEMO USING PLUNKER
I have a Show All or Show Me button which toggles vm.todoShowAll with true or false.
This is my controller code:
var vm = this;
vm.init = function() {
vm.todoShowAll = false;
vm.myName = "Torben";
}
vm.showTodo = function () {
vm.todoShowAll = !vm.todoShowAll;
return false;
}
When Its false I want to show only my ToDo tasks where todos.name==vm.myName and hide the name column in the table
When Its true I want to show all ToDo tasks and show the name column in the table
...and of cause without the table changing shape
Unfortunately this is how it looks now:
I dont know how to filter / unfilter, and I dont know how to avoid the table changing width.
Here is my HTML code:
<table border="0" cellspacing="0" cellpadding="0" class="start-todo start-todo-table start-todo-hover" ng-if="vm.todo.length > 0">
<thead>
<tr class="start-header start-bold start-todo-bg">
<th colspan="6" class="start-padding overflow start-left">
ToDo List
<a ng-click="vm.showTodo()" ng-hide="vm.todoShowAll">
<button class="start-todo-btn start-button" style="width:80px; margin-left:5px;">SHOW ALL</button>
</a>
<a ng-click="vm.showTodo()" ng-show="vm.todoShowAll">
<button class="start-todo-btn start-button" style="width:80px; margin-left:5px;">SHOW ME</button>
</a>
<a ui-sref="book()">
<button class="start-todo-btn start-button" style="width:80px;">NEW TODO</button>
</a>
</th>
</tr>
<tr class="start-header start-head start-todo-bg">
<th class="start-left nowrap" style="min-width:66px;">Property</th>
<th class="start-left overflow" style="width:18%">Category</th>
<th class="start-left overflow" style="width:45%">Task</th>
<th class="start-left overflow" style="width:15%">Time</th>
<th class="start-right overflow" style="width:10%">Day</th>
<th class="start-left overflow" style="width:15%" ng-show="vm.todoShowAll">Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="todos in vm.todo | orderBy:'days'" class="start-text">
<td class="start-left start-border nowrap">{{ todos.property }}</td>
<td class="start-left start-border start-smaller overflow">{{ todos.todoCategory }}</td>
<td class="start-left start-border overflow">{{ todos.task }}</td>
<td class="start-left start-border overflow">{{ todos.time }}</td>
<td class="start-right start-border overflow start-bold greennum">
<span ng-class="(todo.days) > 0 ? 'greennum' : 'rednum'"><b>{{todos.days}}</b></span>
</td>
<td class="start-left start-border overflow" ng-show="vm.todoShowAll">{{ todos.name }}</td>
</tr>
</tbody>
</table>
To filter your columns, you can add a filter to the ng-repeat directive. That would look like this:
<tr ng-repeat="todos in vm.todo | filter:vm.nameFilter | orderBy:'days'" class="start-text">
..
</tr>
then in your controller, you can add the filter function like this:
vm.nameFilter = function(item){
return vm.todoShowAll || item.name === vm.myName;
}
To have the tables have the same width, simply add a width: 100% style to your start-todo-table class:
.start-todo-table {
width: 100%;
}
I have the following:
<select
data-ng-model="option.selectedValue"
data-ng-options="item.id as item.name for item in option.selects">
</select>
<table>
<thead>
<tr>
<th>Id</th>
<th>City</th>
<th>Street</th>
</tr>
</thead>
<tbody class="grid">
<tr data-ng-repeat="row in grid.data">
<td>{{ row.iD }}</td>
<td>{{ row.city }}</td>
<td>{{ row.street }}</td>
</tr>
</tbody>
</table>
Is there a way for me to change it so the street column becomes visible only if the option.selectedValue is equal to 0
Try this on your {{row.street}} and street lines
<th ng-show='option.selectedValue == 0'>Street</th>
...
<td ng-show='option.selectedValue == 0'>{{row.street}}</td>
or
<th ng-hide="option.selectedValue != 0">Street</th>
...
<td ng-hide='option.selectedValue != 0'>{{row.street}}</td>
it's the same ;)
Use ng-show. You need to hide both header column and the content column.
<th ng-show="option.selectedValue == 0">Street</th>
<td ng-show="option.selectedValue == 0">{{ row.street }}</td>
Demo