Add elements below row <td> - html

In my angularjs app there a rows (using ng-repeat), created through .
The code creating rows is below:
<tbody>
<tr ng-repeat="data in downloads">
<td data-title="ID">{{$index + 1}}</td>
<td data-title="User">{{data.user_name}}</td>
<td data-title="Issue">{{data.download_name}}</td>
<td data-title="Progress">{{data.size}}</td>
<td data-title="Completed time" am-time-ago="data.completed_time|amFromUnix"</td>
<td class="information-parent" data-title="More">
<md-icon ng-click="switchIcon()" class="bassa-red-color">{{icon}}</md-icon
</td>
</tr>
</tbody>
I'm trying to implement something that when you click the arrow, the row expands with information appearing like this:
I however can not get the information to appear along the bottom like that. What should I be trying to implement to get text along the bottom - flex box, inline-box ?

Take a look at Bootstrap collapse.js. I think this is what you are looking for, of course, you have to change it in order to meet your needs.

Try below code for your scenario.
(function(ng, app){
app = angular.module('app', [])
app.controller("mainController", ['$scope',
function($scope) {
$scope.downloads = [{
"user_name": "John",
"download_name": "Doe jhonejhonejhone",
"size": "0 byte"
},
{
"user_name": "Anna",
"download_name": "Doe DoeDoeDoeDoe",
"size": "0 byte"
},
{
"user_name": "Maron",
"download_name": "Anna DoeDoeDoeDoeDoe",
"size": "5 byte"
}
];
$scope.editFiles = function() {
$scope.editBar = true;
};
$scope.remove = function(index) {
$scope.downloads.splice(index, 1);
};
}
]);
}(angular));
.btn-primary{
margin-right: 10px;
}
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" ng-controller="mainController">
<div class="row">
<div class="col-md-12">
<input type="submit" class="btn btn-primary addnew pull-left" value="Edit Files" ng-click="editFiles()">
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<form>
<table border=1 class="table table-striped table-bordered">
<thead>
<tr>
<th>
<b> # </b>
</th>
<th>User</th>
<th>Download Name</th>
<th>Complete Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in downloads">
<td>
<b> {{$index + 1}} </b>
</td>
<td>
{{data.user_name}}
</td>
<td>
{{data.download_name}}
<div class="btn-group pull-right" ng-show="editBar">
<button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-pencil"></span></button>
<button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash" ng-click="remove($index)"></span></button>
</div>
</td>
<td>
{{data.size}}
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

You can try the following:
move your ng-repeat to your tbody
add ng-init="data.showSubRow = false" to your tbody
add another row to the tbody that should only be visible when showSubRow is true
so your ng-repeat would look like
<tbody ng-repeat="data in downloads" ng-init="data.showSubRow = false">
<tr>
visible row
</tr>
<tr ng-show="data.showSubRow">
visible when clicked
</tr>
</tbody>
now you can add individual buttons in each row to show / hide content on individual rows or add an edit all function that would make all subrows visible
show / hide individual row
<tr>
<td data-title="ID">
{{$index + 1}
<span>
<button ng-show="!data.showSubRow" ng-click="data.showSubRow = true">+</button>
<button ng-show="data.showSubRow" ng-click="data.showSubRow = false">-</button>
</span>
</td>
<td data-title="User">{{data.user_name}}</td>
<td data-title="Issue">{{data.download_name}}</td>
<td data-title="Progress">{{data.size}}</td>
<td data-title="Completed time" am-time-ago="data.completed_time|amFromUnix"</td>
<td class="information-parent" data-title="More">
<md-icon ng-click="switchIcon()" class="bassa-red-color">{{icon}}</md-icon
</td>
</tr>
display all
$scope.editAll = function(){
angular.forEach($scope.downloads, function(value, key) {
value.showSubRow = !value.showSubRow;
});
}
Working sample ----> Demo

Related

Create a show all button to show hidden row

My code is like this: when you check the 'hide' column, the whole row is hidden. I also have a 'Show All' checkbox. When I check it, all rows (including the hidden ones) are shown. But when I uncheck it, all rows disappear. How can I make it so only the hidden rows disappear when I uncheck 'Show All', and the other rows still remain visible?
<body ng-app="myApp" ng-controller="myController">
<h1>Fruits in Vietnam</h1>
<hr>
<form name="myForm">
<div class="input-group input-group-lg">
<input type="text" class="form-control" name="mdfruitname" id="txtfruitname" ng-model="mdfruitname"
required>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" ng-click="addnew()"
ng-disabled="myForm.mdfruitname.$pristine || myForm.mdfruitname.$invalid">Add
</button>
</div>
</div>
</form>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Hide</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="fruit in fruitnameDetail" ng-show="showall" ng-hide="hidef">
<td>{{fruit.fruitname}}</td>
<td><input type="checkbox" ng-model="hidef"></td>
<td>
<a class="btn btn-xs delete-record" ng-click="removefruitname($index)">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
</tr>
</tbody>
</table>
<div><input type="checkbox" ng-model="showall"><span>SHOW ALL</span></div>
</body>
<script>
var app = angular.module("myApp", []);
app.controller('myController', function ($scope, $window) {
$scope.fruitnameDetail = [
{
"fruitname": "Banana"
},
{
"fruitname": "Mango"
},
{
"fruitname": "Orange"
}
];
$scope.addnew = function () {
var fruitnameDetail = {
fruitname: $scope.mdfruitname
};
$scope.fruitnameDetail.push(fruitnameDetail);
$scope.mdfruitname = '';
};
$scope.removefruitname = function (index) {
var name = $scope.fruitnameDetail[index].fruitname;
if ($window.confirm("Do you want to delete " + name + " ?")) {
$scope.fruitnameDetail.splice(index, 1);
}
};
});
</script>
Do not use ng-show and ng-hide at the same time. Just change a little bit your condition for ng-repeat. Here the example that should work:
<body ng-app="myApp" ng-controller="myController">
<h1>Fruits in Vietnam</h1>
<hr>
<form name="myForm">
<div class="input-group input-group-lg">
<input type="text" class="form-control" name="mdfruitname" id="txtfruitname" ng-model="mdfruitname"
required>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" ng-click="addnew()"
ng-disabled="myForm.mdfruitname.$pristine || myForm.mdfruitname.$invalid">Add
</button>
</div>
</div>
</form>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Hide</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="fruit in fruitnameDetail" ng-show="showall || !hidef">
<td>{{fruit.fruitname}}</td>
<td><input type="checkbox" ng-model="hidef"></td>
<td>
<a class="btn btn-xs delete-record" ng-click="removefruitname($index)">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
</tr>
</tbody>
</table>
<div><input type="checkbox" ng-model="showall"><span>SHOW ALL</span></div>
</body>

Angular showing json object in html table

Hello guys i have json data from firestore and i want to display these data in html table.
This is my customer-list.component.html
<body>
<div class="container">
<div class="title">
<h3>Customer Table</h3>
</div>
<div class="row">
<div class="col-md-12">
</div>
<div class="col-lg-8 col-md-10 ml-auto mr-auto">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="text-center">#</th>
<th>Name</th>
<th>Age</th>
<th>Active</th>
</tr>
</thead>
<tbody>
<div *ngFor="let customer of customers" style="width: 300px;">
<app-customer-details [customer]='customer'></app-customer-details>
</div>
<div style="margin-top:20px;">
<button type="button" class="button btn-danger" (click)='deleteCustomers()'>Delete All</button>
</div>
</tbody>
</table>
</div>
</div>
Seems like there is nothing wrong in there.
This is my customer-details.component.html
<div *ngIf="customer">
<tr>
<td>
<label>First Name: </label> {{customer.name}}
</td>
<td>
<label>Age: </label> {{customer.age}}
</td>
<td>
<label>Active: </label> {{customer.active}}
</td>
<span class="button is-small btn-primary" *ngIf='customer.active' (click)='updateActive(false)'>Inactive</span>
<span class="button is-small btn-primary" *ngIf='!customer.active' (click)='updateActive(true)'>Active</span>
<span class="button is-small btn-danger" (click)='deleteCustomer()'>Delete</span>
</tr>
</div>
But my table output is :
Thanks for answers.
When you look at the DOM tree you will find out that
<tr><app-customer-details>...</app-customer-details</td>
This will not result in the component rendering inside the table as a but will cram the entire component HTML template inside one column.
By adding an attribute selector to the component i.e. selector: 'app-customer-details, [app-customer-details]', you can add the selector directly to the element like so and now the elements inside the component HTML template will render correctly inside the table.
Look at this link;
The correct code is as follows:
Customer-list.component.html
<div class="container">
<div class="title">
<h3>Customer Table</h3>
</div>
<div class="row">
<div class="col-md-12">
</div>
<div class="col-lg-8 col-md-10 ml-auto mr-auto">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<!-- <th class="text-center">#</th> -->
<th>Name</th>
<th>Age</th>
<th>Active</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let customer of customers" [customerDetails]="customer">
</tr>
<div style="margin-top:20px;">
<button type="button" class="button btn-danger" (click)='deleteCustomers()'>Delete All</button>
</div>
</tbody>
</table>
</div>
</div>
</div>
</div>
Customer-details.component.html
<td>
{{customerDetails.name}}
</td>
<td>
{{customerDetails.age}}
</td>
<td>
{{customerDetails.active}}
</td>
Customer-details.component.ts
import { Component, OnInit, Input } from '#angular/core';
#Component({
selector: 'customerDetails, [customerDetails]',
templateUrl: './customer-details.component.html',
styleUrls: ['./customer-details.component.css']
})
export class CustomerDetailsComponent implements OnInit {
#Input() customerDetails: object = {};
constructor() { }
ngOnInit() {
}
}
Don´t limit the width of a customer´s component to 300px, like you did here:
<div *ngFor="let customer of customers" style="width: 300px;">
You have many things which will not render your table properly:
<tbody>
<div *ngFor="let customer of customers" style="width: 300px;">
<app-customer-details [customer]='customer'>
</app-customer-details>
</div>
....
</tbody>
This will render like this:
<tbody>
<div ...>
<app-customer-details>
<div> <tr>.....</tr></div>
</app-customer-details>
</div>
....
</tbody>
Which is not correct HTML.
Change you detail component to use ng-template:
<ng-template >
<tr *ngIf="customer">
<td><label>First Name: </label> {{customer.name}}</td>
<td><label>Age: </label> {{customer.age}}</td>
<td><label>Active: </label> {{customer.active}}</td>
<td>
Note: All spans should also be inside a TD tag
</td>
</tr>
</ng-template>

angularjs div's duplicating. every next button controls a corresponding div

I have such a simplified markup which appends and fills in every next row by surname and name; also by clicking the "List" button I need to fill in additional data about this person in a new popup div and save all information into LocalStorage.
The problem is when I click on different "List" buttons appears and hides the same div but the task is:
by clicking on different "List" buttons appear and hide different divs(clones).
Your support highly appreciated.
var app = angular.module("myApp",['listOfBooks']);
app.controller("myCtrl", function($scope){
$scope.authors = [];
$scope.addAuthor = function(){
var author = {};
author.surname = "";
author.name = "";
$scope.authors.push(author);
};
});
var app = angular.module("listOfBooks",[]);
app.controller("booksCtrl", function($scope){
$scope.showBooks = false;
$scope.showBookList = function(){
$scope.showBooks = !$scope.showBooks;
}
$scope.books = [];
$scope.addBook = function(){
var book = {};
book.title = "";
$scope.books.push(book);
};
});
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="container">
<h3>AUTHORS' LIST</h3>
<div class="btn-group">
<button ng-click ="addAuthor()" type="button" class="btn btn-default">Add</button>
</div>
<form ng-controller="booksCtrl" name ="myForm">
<table class="table table-bordered">
<tr>
<th>Surname</th>
<th>Name</th>
<th>Books</th>
</tr>
<tr ng-repeat="author in authors">
<td><input ng-model="author.surname" type="text" class="form-control"></td>
<td><input ng-model="author.name" type="text" class="form-control"></td>
<td>
<button ng-click="showBookList()" type="button" class="btn btn-default">List</button>
</td>
</tr>
</table>
<div ng-show="showBooks" class="col-sm-8" style="background-color:lightblue; position: absolute; left:5px; top:5px;z-index:2;">
<div class="btn-group">
<button ng-click ="addBook()" type="button" class="btn btn-default">Add</button>
</div>
<table class="table table-bordered">
<tr>
<th>Title</th>
</tr>
<tr ng-repeat="book in books">
<td><input ng-model="book.title" type="text" class="form-control"></td>
</tr>
</table>
</div>
</form>
</div>
</body>
</html>
I understand the question to be around how should you add a list of books with respect to the author. The current code creates a list of books, but does not allow the books to associate to a given author. I've done this with minimal changes, aside from adding a section to display the contents of the author array. I also added a simple close button within the list div for easier use.
This example takes advantage of the existing authors array that you have, and adds a child array under the books property. When you add an author, and then add a book, the property will be created if it does not already exist.
var app = angular.module("myApp", ['listOfBooks']);
app.controller("myCtrl", function($scope) {
$scope.authors = [];
$scope.addAuthor = function() {
var author = {};
author.surname = "";
author.name = "";
$scope.authors.push(author);
};
});
var app = angular.module("listOfBooks", []);
app.controller("booksCtrl", function($scope) {
$scope.showBooks = false;
$scope.currentAuthor = {};
$scope.showBookList = function(author) {
$scope.showBooks = !$scope.showBooks;
$scope.currentAuthor = author;
}
$scope.addBook = function() {
// If the current author doesn't have a books array yet, create an empty one.
$scope.currentAuthor.books = $scope.currentAuthor.books || [];
var book = {};
book.title = "";
$scope.currentAuthor.books.push(book);
};
});
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="container">
<h3>AUTHORS' LIST</h3>
<div class="btn-group">
<button ng-click="addAuthor()" type="button" class="btn btn-default">Add</button>
</div>
<form ng-controller="booksCtrl" name="myForm">
<table class="table table-bordered">
<tr>
<th>Surname</th>
<th>Name</th>
<th>Books</th>
</tr>
<tr ng-repeat="author in authors">
<td><input ng-model="author.surname" type="text" class="form-control"></td>
<td><input ng-model="author.name" type="text" class="form-control"></td>
<td>
<button ng-click="showBookList(author)" type="button" class="btn btn-default">List</button>
</td>
</tr>
</table>
<div ng-show="showBooks" class="col-sm-8" style="background-color:lightblue; position: absolute; left:5px; top:5px;z-index:2;">
<div class="btn-group">
<button ng-click="addBook()" type="button" class="btn btn-default">Add</button>
</div>
<table class="table table-bordered">
<tr>
<th>Title</th>
</tr>
<tr ng-repeat="book in currentAuthor.books">
<td><input ng-model="book.title" type="text" class="form-control"></td>
</tr>
</table>
<button class="btn btn-sm btn-warning" ng-click="showBooks = false">Close</button>
</div>
</form>
</div>
<hr />
<h2>authors data</h2>
<ul>
<li ng-repeat="a in authors">
Surname: {{ a.surname }}, Name: {{ a.name }}
<ul>
<li ng-repeat="b in a.books">Book: {{ b.title }}</li>
</ul>
</li>
</ul>
</body>
</html>

expanding and collapsing table rows using angularjs ng-repeat -start and ng-repeat-end

i have one issue can anyone help me please...
i have a table in that table i have four users. and i have two icons(one is for expanding and another is for collapsing table rows data at time(all)) above table when i clicked on expand icon the data in table expanded and collapsed. so until this fine to me . now am going to expand particular row of table by clicking arrow(actually present in tr) it expanded particular row and collapsed that particular row. then this time if a clicked expand and collapse icons(expand all and collapse all). then expanding and collapsing are not working.
Here am using ng-repeat-start and ng-repeat-end.
<div class="comprehensiveINDiv" ng-show="visibleCarConferenceList">
<div class="top-bg-expand" >
<div class="col-md-5 color-blue">
<h1 class="main-heading1 ">Care Conference
<span class="expand-btns">
<a><i class="fa fa-compress color-blue" aria-hidden="true" ng-click="expanded = true"></i></a>
|
<a><i class="fa fa-expand" aria-hidden="true" ng-click="loadAllcareplans(); expanded = !expanded"></i></a>
</span>
</h1>
</div>
<div class="col-md-3 select-pan1 select-inner-pan1 careconfhed">
<label>Status: </label>
<select ng-model="filterOpt.opt"
ng-options="item.name for item in filterOpts.options"
ng-change="getCareConferenceList();resetPage();">
</select>
</div>
<div class="col-md-4 ">
<sm-range-picker-input class="margn0" fname="Range" label="Range"
form="test" ng-model="vm.rangeSelected" flex="100"
format="DD-MMM-YYYY" divider="To" week-start-day="Monday"
on-range-select="rangeSelected(range)"
ng-change="getCareConferenceList();">
</sm-range-picker-input>
</div>
</div>
<div ng-show="noConfData" class="margnL15">NO RECORDS FOUND</div>
<div>
<button type="button" class="btn btn-info btn-sm margnL15"
id="addnew_btn" ng-click="addNewconference();">ADD NEW</button>
</div>
<div ng-show="confGrid">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-data3 tablestyle" id="tbl1">
<thead>
<tr>
<th></th>
<th> Date / Time </th>
<th>Reason</th>
<th>Status </th>
<th>Action</th>
<!--<th>time</th>-->
</tr>
</thead>
<tbody>
<tr ng-show="noConfData"><td colspan="4" >NO RECORDS FOUND</td></tr>
<tr ng-repeat-start="careconf in residentCareConferenceList" class="md-table-content-row class_{{careconf.CareConferenceID}}">
<td><a ng-click="expanded = !expanded"><i class="fa fa-angle-right" aria-hidden="true"></i></a></td>
<td ng-class="customClass[h.field]" class="md-table-content">{{careconf.CareConferenceDate | date:'dd/MM/yyyy hh:mm a'}}</td>
<td ng-class="customClass[h.field]" class="md-table-content">{{careconf.ReasonDescription}}</td>
<td ng-class="customClass[h.field]" class="md-table-content">{{careconf.careconferencestatus.CareConferenceStatusDescription}}</td>
<td><span class="fa fa-pencil" ng-click="EditCareConference(careconf.CareConferenceID);$event.stopPropagation();"></span></td>
<!--<td ng-class="customClass[h.field]" class="md-table-content">{{careconf.TotalTime}}</td>-->
</tr>
<tr ng-repeat-end ng-class="{'hide' : expanded}">
<td colspan="5" style="width: 100%; border:none !important; padding-left:20px;">
<div class="col-md-12 scrolldata">
<div class="col-md-12 ">
<div class="col-md-12 residance-data-text">
<p>Facility :{{careconf.facilitybase.FacilityName }}</p>
<p> Resident : {{currentResident.personbase.FullName}}</p>
<p> Admitted :{{currentResidentDetails.AdmitReAdmiDischDate | date:'dd/MM/yyyy hh:mm a'}}</p>
<p> Physician : {{residentprovider}}</p>
</div>
</div>
<div class="col-md-12" id="table">
<div class="col-md-12">
<!-- Table one -->
<p> Interdisciplinary team members involved in this Resident's Care Planning since last Care Conference ({{careconf.LastCareConferenceDate | date:'dd/MM/yyyy hh:mm a'}}) :</p>
<div class="tablestyledit">
<table class="table">
<tr>
<th width="50%" class="bdr-table">Name </th>
<th width="50%" class="bdr-table">Credentials </th>
</tr>
<tr ng-repeat="teamMember in careconf.teamMembers">
<td class="bdr-table">{{teamMember.ParticipantName}}</td>
<td class="bdr-table">{{teamMember.ParticipantRole}}</td>
</tr>
</table>
</div>
<div class="col-md-12" style="padding-top:0px;">
<div class="row">
<div class="md-form">
<p style="margin:0px;">Care Conference Summary</p>
<div class="empty-text">{{careconf.CareConferenceSummary}}</div>
</div>
</div>
</div>
<!--- /Table one -->
<!-- Table two -->
<div class="col-md-12" style="padding:0px;">
<p style="margin:0px; padding-top:10px;">Care Conference Participants :</p>
<div class="tablestyledit">
<table class="table ">
<tr>
<th width="50%" class="bdr-table">IDT Participant Name</th>
<th width="25%" class="bdr-table">Credentials</th>
<th width="25%" class="bdr-table">In Person</th>
</tr>
<tr ng-repeat="participant in careconf.participants">
<td class="bdr-table">{{participant.ParticipantName}}</td>
<td class="bdr-table">{{participant.ParticipantRole}}</td>
<td class="bdr-table">
<fieldset class="form-group">
<input type="checkbox" data-ng-model="participant.IsInPerson" disabled>
</fieldset>
</td>
</tr>
</table>
</div>
</div>
<!--/ Table two -->
<!-- Table three -->
<div class="col-md-12" style="padding:0px;">
<p style="margin:0px; padding-top:10px;">Family/Resident Attendance : </p>
<div class="tablestyledit">
<table class="table table-data-sub ">
<tr>
<th class="bdr-table">Name of person Invited</th>
<th class="bdr-table">Relationship</th>
<th class="bdr-table">Attended</th>
<th class="bdr-table">In Person</th>
</tr>
<tr ng-repeat="familyMember in careconf.familyMembers">
<td class="bdr-table">{{familyMember.ParticipantName}}</td>
<td class="bdr-table">{{familyMember.Relationship}}</td>
<td class="bdr-table">
<fieldset class="form-group">
<input type="checkbox" data-ng-model="familyMember.HasAttended" disabled>
</fieldset>
</td>
<td class="bdr-table">
<fieldset class="form-group">
<input type="checkbox" data-ng-model="familyMember.IsInPerson" disabled>
</fieldset>
</td>
</tr>
</table>
</div>
</div>
<div class="col-md-12" style="margin-left:-15px;margin-bottom:8px;">
<p> Care Conference Date : {{careconf.CareConferenceDate | date:'dd/MM/yyyy hh:mm a'}}</p>
<p>Signed by:</p>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<div flex layout="column" class="pagi-nation">
<div ng-show="confTotal > 1" flex layout="column">
<section layout="row" layout-padding="">
<div class="col-md-5 col-xs-12">Showing Page <strong>{{confPage}}</strong></div>
<div class="col-md-7 col-xs-12">
<cl-paging id="confPage" flex cl-pages="confTotal" , cl-steps="3" , cl-page-changed="loadConfPages.onPageChanged()" , cl-align="center center"
, cl-current-page="Paging.currentPage"></cl-paging>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
<div ng-show="visibleCarConferenceAdd">
<div ng-include="'views/doctor/addCareConference.html'"></div>
</div>
</div>
and my controller code
$scope.loadAllcareplans = function () {
$scope.expanded = true;
}
and finally am so sorry for my stupid english. and check my functinality (expanded, $scope.loadAllcareplans() and icons at careconference foe expanding and collapsing all table data )
Check this fiddle
The content is not what you provided.
But the logic will be this
https://jsfiddle.net/athulnair/wkz5oq9z/
$scope.collapseAll = function() {
$scope.data.forEach(function(item) {
item.isCollapsed = false;
})
}
Rather than using the above ng-click function in the tag you could go with javascript and adding/removing classes dynamically.I have used ui-bootstrap and glyphicon. Follow the below code.
HTML:
<a data-toggle="collapse" data-target="#test"><i class="test_icon glyphicon glyphicon-collapse-down"></i><h4 class="header"> Test Class </h4></a>
JavaScript
$('#test').on('hidden.bs.collapse', function () {
$(".test_icon").removeClass("glyphicon-collapse-down").addClass("glyphicon-collapse-up");
});
$('#test').on('shown.bs.collapse', function () {
$(".test_icon").removeClass("glyphicon-collapse-up").addClass("glyphicon-collapse-down");
});

AngularJS processing input value

When i start typing a name of student, like "M", the list of student needs to include only students, name of that are starting on letter "M" and so on rest of the word. But input value .length is undefined all the time.
(function() {
var app = angular.module('app', []);
app.controller('DataController', function() {
this.students = arr;
this.compare = function() {
for (var i = 0; i < this.text.length; i++) {
if (this.text[i] == this.students.name[i]) {
alert(this.text);
return true;
}
}
}
});
var arr= [{
name: 'Azurite',
price: 2.95
}, {
name: 'Bloodstone',
price: 5.95
}, {
name: 'Zircon',
price: 3.95
}];
}());
HTML
<div class="container-fluid">
<div class="row-fluid">
<input class="col-md-12 col-xs-12" type="text" placeholder="Search people by name..." ng-model='text' ng-change='data.students.name'>
<div class="buttons">
<button class="btn btn-sort">Sort by name</button>
<button class="btn btn-sort">Sort by age</button>
<button ng-click='data.click()' class="btn btn-danger">Reset</button>
</div>
</div>
<!--Main content-->
<div class="main-table col-sm-8 col-md-7 col-md-offset-1 col-lg-7 col-lg-offset-1">
<table class="table table-hover">
<thead>
<tr>
<th class="text-center">Image</th>
<th>Name</th>
<th>Age</th>
<th>Phone</th>
</tr>
</thead>
<tbody ng-repeat='student in data.students' ng-show='data.compare()'>
<tr>
<td>
<img src="/img/cat.svg" alt="">
</td>
<td>{{student.name}}</td>
<td>41</td>
<td>sieg#example.com</td>
</tr>
</tbody>
</table>
</div>
</div>
The angular way to do this is to use the filter feature built in to angular.
first, the text box you want to type your search into:
<input class="col-md-12 col-xs-12" type="text"
placeholder="Search people by name..." ng-model='data.text'>
Note that this only needs an ng-model value.
Next, the ng-repeat:
<tbody ng-repeat='student in data.students | filter:data.text'>
Nothing is necessary at all in the controller.
http://plnkr.co/edit/aoR2ZkrgjCvhC60Ky0QA?p=preview