Does angular have a onfilter method or onquery as you type to query through results:
for example:
<input type='text' ng-model='query'>
<table>
<tr>
<td>Name</td>
<td># of Enrollments</td>
</tr>
<tr ng-repeat='c in courses | filter:query' onfilter='someStuff()'>
<td>{{c.name}}</td>
<td>{{c.enrollmentLength}}</td>
</tr>
</table>
when I type in the input text the letter "a", I want it to call the someStuff() function.
The way you do this is with a watch inside your controller:
$scope.$watch('query', function(newval) {
// this will fire when query is changed
});
Filter can call a function instead of using an expression. Here's an example:
$scope.processQuery = function(course) {
// do some processing
};
<input type='text' ng-model='query'>
<table>
<tr>
<td>Name</td>
<td># of Enrollments</td>
</tr>
<tr ng-repeat='c in courses | filter:processQuery'>
<td>{{c.name}}</td>
<td>{{c.enrollmentLength}}</td>
</tr>
</table>
Related
I have an object that looks like this:
[{'name':'Mike', 'age':21},
{'name':'Joe', 'age':24}]
My angular/html code looks like this:
<table class="Names">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tbody>
<tr ng-repeat-start="value in msg.object">
<td rowspan="2">{{value.name}}</td>
</tr>
<tr ng-repeat-end ng-repeat="value in msg.object">
<td>{{value.age}}</td>
</tr>
</tbody>
</table>
The names show up fine and vertically how i'd want them to be in the table (first column),
but for each value of name i get both of the ages displaying instead of just the age for that person.
Can anyone guide me in the right direction here? I feel like I'm close but just picked up angular today so I'm new to it and ng-repeat.
You only need a simple row repeat with 2 cells in each row
<tr ng-repeat="value in msg.object">
<td>{{value.name}}</td>
<td>{{value.age}}</td>
</tr>
Your table format is wrong. Place the headers inside and do a ng-repeat to generate tr
DEMO
var app =angular.module('testApp', []);
app.controller('testCtrl', function($scope) {
$scope.users = [{'name':'Mike', 'age':21},
{'name':'Joe', 'age':24}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<table border="2">
<tr>
<td>name</td>
<td>age</td>
</tr>
<tr ng-repeat="user in users">
<td >{{user.name}}</td>
<td >{{user.age}}</td>
</tr>
</table>
</body>
here is demo: http://codepen.io/mafeifan/pen/PzrGRE?editors=1010
table1 is working,
in table2 I wrote a directive to render the td , but not work. I don't know why.
Html：
<table>
<tbody>
<tr ng-repeat="tr in vm.getTrs() track by $index">
<form-cell ng-repeat="cell in vm.getCellsByRow($index+1)">data</form-cell>
</tr>
</tbody>
</table>
JS：
App.directive('formCell', function(){
return {
replace: true,
template: '<td>td</td>'
}
});
if I change to
<table>
<tbody>
<tr ng-repeat="tr in vm.getTrs() track by $index">
<td ng-repeat="cell in vm.getCellsByRow($index+1)"><form-cell></form-cell></td>
</tr>
</tbody>
</table>
JS:
change the template to '<span>td</td>' in directive
it's working, I don't know why
You do need <th> or <td> in <tr> tags:
<html>
<body>
<table border="1">
<tr>
<td>renders</td>
<td>renders</td>
</tr>
<tr>
<div>renders outside the table</div>
<td>renders</td>
</tr>
</table>
</body>
</html>
It seems form-cell tag is not allowed inside tr tag and browser may do something wrong. Use the directive inside an attribute:
App.directive('formCell', function(){
return {
restrict: 'A', // <-- add the restriction
replace: true,
template: '<td>td</td>'
}
});
Like:
<td form-cell ng-repeat="cell in vm.getCellsByRow($index+1)">data</td>
I'm using ng-repeat to populate a table with data. This is how I have it setup:
<tbody>
<tr ng-repeat="client in clients | filter:x | filter:y |orderBy:predicate:!reverse | itemsPerPage: pageSize">
<td><input id="option-{{client.id}}" type="checkbox" value=""></td>
<td>{{client.lastname}}</td>
<td>{{client.firstname}}</td>
<td>{{client.status}}</td>
<td>{{client.phone}}</td>
<td>{{client.email}}</td>
</tr>
</tbody>
But I'm needing it to add a table row underneath the row it creates in the ng-repeat. Is that possible?
You can create a directive:
app.directive('addRow', function ($parse, $compile) {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
var template = attrs.addRow ? $parse(attrs.addRow)(scope) : '<tr><td>-</td></tr>';
elem.after(template);
$compile(elem.contents());
}
}
});
It adds passed row template after each element. If template is not passed it uses default template. It also compiles your template, so you can use all angular's stuff inside (eg. <td>{{variable}}</td>).
Example use:
<table>
<tbody>
<tr ng-repeat="item in [1,2,3,4]" add-row="'<tr><td>my template</td></tr>'">
<td>{{item}}</td>
</tr>
</tbody>
</table>
Here is jsfiddle: http://jsfiddle.net/aartek/52b6e/
You can allways add a row manually to the table like:
<tbody>
<tr ng-repeat="client in clients | filter:x | filter:y |orderBy:predicate:!reverse | itemsPerPage: pageSize">
<td><input id="option-{{client.id}}" type="checkbox" value=""></td>
<td>{{client.lastname}}</td>
<td>{{client.firstname}}</td>
<td>{{client.status}}</td>
<td>{{client.phone}}</td>
<td>{{client.email}}</td>
</tr>
<tr>
<td>Footer 1</>
<td>Footer 2</>
<td>Footer 3</>
<td>Footer 4</>
<td>Footer 5</>
<td>Footer 6</>
</tr>
</tbody>
Even better include it in a tfoot tag.
Or if you need two rows, you can do this:
<tbody ng-repeat="item in items">
<tr>
<td>{{item.row_one_stuff}}</td>
<td>{{item.more_row_one_stuff}}</td>
</tr>
<tr>
<td>{{item.row_two_stuff}}</td>
<td>{{item.more_row_two_stuff}}</td>
</tr>
</tbody>
I am trying to select all the elements with class "name" and when I click on one radio button it flips the last and first name around, so: Hanks, Tom || Tom, Hanks. Here is what I have so far:
HTML:
<h1>Address Book</h1>
<p>Show Names as:</p>
<input name="lastfirst" value="last" type="radio">First, Last
<input name="firstfirst" value="first" type="radio">Last, First
<div>
<table <thead="">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</tbody>
<tbody>
<tr>
<td>9001</td>
<td class="name">Tom Hanks,</td>
<td>tomhanks#moviestars.com</td>
</tr>
<tr>
<td>9002</td>
<td class="name">Bruce Willis,</td>
<td>brucewillis#moviestars.com</td>
</tr>
<tr>
<td>9003</td>
<td class="name">Jim Carrey,</td>
<td>jimcarrey#moviestars.com</td>
</tr>
<tr>
<td>9004</td>
<td class="name">Tom Cruise,</td>
<td>tomcruise#moviestars.com</td>
</tr>
<script>
</script>
</tbody>
</table>
</div>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="./webassets/style.css" media="screen" type="text/css">
<h1>Company Staff List</h1>
<div>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>9001</td>
<td>Tom Hanks,</td>
</tr>
<tr>
<td>9002</td>
<td>Bruce Willis,</td>
</tr>
<tr>
<td>9003</td>
<td>Jim Carrey,</td>
</tr>
<tr>
<td>9004</td>
<td>Tom Cruise,</td>
</tr>
</tbody>
</table>
</div>
Here is my jquery. I used a filler of .hide() because other than selecting the elements I am not sure how to do this. Just some hints would help. I am not sure how to separate the first and last name. If I could figure out how to simply swap the first and last name into a variable I could definitely figure out the rest.
$(document).ready(function(){
$("input[name='lastfirst']").click(function(){
$(".name").hide();
});
$("input[name='firstfirst']").click(function(){
$(".name").hide();
});
});
DEMO
$(document).ready(function () {
$("input[name='change_last_first']:nth(0)").prop('checked', true)
$("input[name='change_last_first']").change(function () {
$(".name").text(function (_, old_txt) {
var new_txt = old_txt.split(' ').reverse();
return new_txt.toString().replace(',,', ' ') + ',';
});
});
});
HTML changed
<input name="change_last_first" value="last" type="radio">First, Last
<input name="change_last_first" value="first" type="radio">Last, First
References
.text()
.change()
.replace()
.split()
.toString()
.reverse()
Split it first using.
var splStr = input.split(/[ ,]+/);
now concatinate using input=splStr[1]+splStr[0];
you can separate the text using split function input.split(/[ ,]+/); along with a regular expression to separate each "word" within the input.
you could then assign each value to a new variable
ex:
var a = array[0], b = array[1]
From there you could concatenate the array values into any order you choose.
I have a HTML Table:
<table id="persons" border="1">
<thead id="theadID">
<tr>
<th>Name</th>
<th>sex</th>
<th>Message</th>
</tr>
</thead>
<tbody id="tbodyID">
<tr>
<td>Viktor</td>
<td>Male</td>
<td>etc</td>
</tr>
<tr>
<td>Melissa</td>
<td>Female</td>
<td>etc</td>
</tr>
<tr>
<td>Joe</td>
<td>Male</td>
<td>etc</td>
</tr>
</tbody>
</table>
<input type="button" onclick="getTbodyString();" value="get it"/>
I want some jquery/javascript, which can get the inside of the tbody by String. Like:
function getTbodyString() {
var tbodyString = $(.......).text(); //or val()?
alert("the body - "+tbodyString);
}
The result in the alert window should be this:
the body - <tr><td>Viktor</td><td>Male</td><td>etc</td></tr><tr><td>Melissa</td><td>Female</td><td>etc</td></tr><tr><td>Joe</td><td>Male</td><td>etc</td></tr>
Could anyone help me?
You need to html() instead of text(). The function text will not return you tags but returns plain text within tags.
var tbodyString = $('#tbodyID').html();
I would use native javascript function here that would be faster then jquery.
var tbodyString = document.getElementById('tbodyID').innerHTML;
Just Replace your function code as below :
function getTbodyString() {
var tbodyString = $('#tbodyID').html();
alert("the body - "+tbodyString);
}