I got table with checkboxes but I don't know how to do something while checkbox is checked.
<md-table-container>
<table md-table md-row-select multiple ng-model="selected" md-progress="promise">
<thead md-head>
<tr md-row>
<th md-column></th>
<th md-column>ID</th>
<th md-column>Username</th>
</tr>
</thead>
<tbody md-body>
<tr md-row md-select="user" md-select-id="id" md-auto-select ng-repeat="user in users">
<td md-cell></td>
<td md-cell><span>{{ user.id }}</span></td>
<td md-cell>{{ user.username }}</td>
</tr>
</tbody>
</table>
</md-table-container>
How Can I check that checkbox is checked and do something?
add $scope.$watch on the variable that you are interested in (or watchcollection)
https://docs.angularjs.org/api/ng/type/$rootScope.Scope
Do not forget that variable you are watching is in $scope and propagation of variable into ng-if scopes happen by copying not reference. You can wrap variable into some container object, otherwise changes will happen in another scope and you never notice them.
Related
I'm trying to hide whole column with all elements in that column when the checkbox is clicked. I'm wondering what's the best approach to solve that using Angular.
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Date</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of Items" >
<td>{{user.Name}}</td>
<td>{{user.Email}}</td>
<td>{{user.Date}}</td>
</tr>
</tbody>
</table>
Above the table I have 3 checkboxes:
Name | Email | Date
I want to press one of them and then whole column disappears including <th> element and <td> element.
What could be the best idea for this problem?
To hide columns when a checkbox is selected.
In your .ts create 3 variables set to true for each column.
showName = true;
showEmail = true;
showDate = true;
in your respective checkboxes you need to add checked and change calls for each and match it to the 3 booleans above:
<input type="checkbox" [checked]="!showName" (change)="showName=!showName"/>
<input type="checkbox" [checked]="!showEmail" (change)="showEmail=!showEmail"/>
<input type="checkbox" [checked]="!showDate " (change)="showDate =!showDate "/>
And then add *ngIf in each related th and td for example for the name td and th:
<th scope="col" *ngIf="showName">Name</th>
<td *ngIf="showName">{{user.Name}}</td>
declare class
export class ColumnVisible{
public nameVisible:boolean=true;
public emailVisible:boolean=true;
public dateVisible:boolean=true;
constructor(){}
}
call it in component
columnVisible:ColumnVisible;
in costructor initialize it with
this.columnVisible=new ColumnVisible();
inhtml write as class and give click event
<input [(ngModel)]="columnVisible.nameVisible" type="checkbox"(change)="columnVisible.nameVisible=!columnVisible.nameVisible" />
<input [(ngModel)]="columnVisible.emailVisible" type="checkbox"(change)="columnVisible.emailVisible=!columnVisible.emailVisible" />
<input [(ngModel)]="columnVisible.dateVisible" type="checkbox"(change)="columnVisible.dateVisible=!columnVisible.dateVisible" />
<table class="table">
<thead>
<tr>
<th ngIf="columnVisible.nameVisible" scope="col">Name</th>
<th ngIf="columnVisible.emailVisible" scope="col">Email</th>
<th ngIf="columnVisible.dateVisible" scope="col">Date</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of Items" class="{{user.IsShown}}" >
<td ngIf="columnVisible.nameVisible" >{{user.Name}}</td>
<td ngIf="columnVisible.emailVisible">{{user.Email}}</td>
<td ngIf="columnVisible.dateVisible">{{user.Date}}</td>
</tr>
</tbody>
</table>
Here's a little bit of code. stackblitz. You just need three different models for different checkboxes or use 1 property but with different types
I display a table through ng-repeat
<div ng-app="spApp">
<div ng-controller="spListCtrl as MyList">
<table width="100%" cellpadding="10" cellspacing="2">
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>CellPhone</th>
<th>Update</th>
</thead>
<tbody>
<tr ng-repeat="item in MyList.Contacts track by $index">
<td class="align-center"><input type="text" ng-model="MyList.Contacts[$index].FirstName"> </input></td>
<td class="align-center">{{MyList.Contacts[$index].Title}}</td>
<td class="align-center">{{MyList.Contacts[$index].Email}}</td>
<td class="align-center">{{MyList.Contacts[$index].CellPhone}}</td>
<td class="align-center"><button ng-click="ShowNewForm(MyList.Contacts[$index])">Изменить</button></td>
</tr>
</tbody>
</table>
Loading through the service on the ajax data
spApp.controller('spListCtrl', function spListCtrl($scope,dataService){
var Contacts;
var promiseObj=dataService.getContacts();
promiseObj.then(function(value) {
Contacts=value;
});
I check in debugging, and data are assigned to come normal, but not displayed. What did not tried it, tell me what I'm doing wrong.
while using controllerAs pattern, do bind data binding variables to this(controller function context), so that you could access them on HTML using it alias MyList(which is instance of controller function).
Code
spApp.controller('spListCtrl', function spListCtrl(dataService){
var self = this
var promiseObj=dataService.getContacts();
promiseObj.then(function(value) {
self.Contacts=value.data;
});
});
And inside ng-repeat use item to have binding working.
<tr ng-repeat="item in MyList.Contacts track by $index">
<td class="align-center"><input type="text" ng-model="item.FirstName"> </input></td>
<td class="align-center">{{item.Title}}</td>
<td class="align-center">{{item.Email}}</td>
<td class="align-center">{{item.CellPhone}}</td>
<td class="align-center"><button ng-click="ShowNewForm(item)">Изменить</button></td>
</tr>
This question already has answers here:
How to get the index of an parent scope array/ng-repeat inside child ng-repeat
(3 answers)
Closed 8 years ago.
I am trying to limit a sub repeat by the index of its parent repeat. So whaever level index it on it will be limited to that (+ 1 so we dont start at 0). Here is my thinking -
<div class="inputRepeater" ng-repeat="face in inputFaces" ng-show="face.isCurrent" >
<div class="trialGrid">
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="(key, val) in rowCollection[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection | limitTo: face.$index + 1">
<td ng-repeat="item in row">{{item}}</td>
</tr>
</tbody>
</table>
</div>
</div>
So the tr inside the table would be limited to the initial repeat of face, buy faces $index + 1. This is not working. Any insight would be much appreciated. Thanks!
You can use ng-init to save a reference to the upper $index
<div class="inputRepeater" ng-repeat="face in inputFaces" ng-show="face.isCurrent" >
<div class="trialGrid" ng-init="$faceIndex = $index">
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="(key, val) in rowCollection[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection | limitTo: $faceIndex + 1">
<td ng-repeat="item in row">{{item}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Instead of face.$index use $parent.$index because you want to refer parent ng-repeat $index.
Because ng-repeat creates an isolated scope from its current running scope.
CODE
<div class="inputRepeater" ng-repeat="face in inputFaces" ng-show="face.isCurrent">
<div class="trialGrid">
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="(key, val) in rowCollection[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection | limitTo: $parent.$index + 1">
<td ng-repeat="item in row">{{item}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Hope this would be helpful to you.
I'm stuck in getting parent ng-repeat value using child ng-repeat slug. It shows nothing just blank td's
What I've done
$scope.column = [column_id: "12"slug: "item6"sort: "0"status: "1"title: "Contact no"ts_datetime: "2014-12-12 12:27:50"];
$scope.column.item = [item1: "1"item2: "2"item3: "3"item4: "4"item5: "5"item6: "8"item_id: "1"status: "1"]
<table class="table table-bordered table-striped">
<thead>
<tr>
<th ng-repeat="column in columns" >{{ column.title }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in listings">
<td ng-repeat="column in columns" ng-init="val = item.column.slug">{{ val }}</td>
</tr>
</tbody>
</table>
What I want is this. to get the value of item with the slug of column. Like item.column.slug
It looks like you want to use:
<td ng-repeat="column in columns">{{item[column].slug}}</td>
I have a page that is using my ClientController and template to show a table of information that is retrieved from the server. For each collection of data I'd like to have 2 table rows, one that is always showing, and another which only shows when the first one is clicked.
I've simplified the code as there is a bit more going on here, but nothing that I would have thought would affect this.
My HTML looks like
<table>
<tbody ng-repeat="session in sessions" ng-switch on="sessionID">
<tr>
<td>{{session.test_name}}</td>
<td><a ng-click="showID(session.session_id)">view {{session.session_id}}</a></td>
</tr>
<tr class="pop-open" ng-switch-when="session.sessionID">
<td colspan="2">
{{session.session_ID}} and more details
</td>
</tr>
</tbody>
</table>
in my controllers.js i have
.controller('ClientController', ['$scope', function($scope) {
$scope.showID = function(sessionID){
$scope.sessionID = sessionID
alert($scope.sessionID)
}
}])
the alert pops-up with correct ID but the table rows aren't showing as I would have expected.
you actually dont need ng-switch for this simple use case scenario, add variable like showDetails on session, that should do it...
<table>
<tbody ng-repeat="session in sessions">
<tr>
<td>{{session.test_name}}</td>
<td><a ng-click="session.showDetails = !session.showDetails">view details</a></td>
</tr>
<tr class="pop-open" ng-show="session.showDetails">
<td colspan="2">
{{session.session_ID}} and more details
</td>
</tr>
</tbody>
</table>
TO KEEP ONLY ONE OPEN AT A TIME
<table>
<tbody ng-repeat="session in sessions">
<tr>
<td>{{session.test_name}}</td>
<td><a ng-click="showDetailsOfId = session.session_id">view details</a></td>
</tr>
<tr class="pop-open" ng-show="showDetailsOfId == session.session_id">
<td colspan="2">
{{session.session_ID}} and more details
</td>
</tr>
</tbody>
</table>