Trying to get md-virtual-repeat to work but getting in the console:
Controller 'mdVirtualRepeatContainer', required by directive 'mdVirtualRepeat', can't be found!
I have a <md-virtual-repeat-container> with a <tr md-virtual-repeat="row in table" md-item-size="25"></tr> inside of it. Working with angular-material 0.10.1 and angular 1.4.2.
Try to put md-virtual-repeat-container as attribute of tbody.
I also encountered this error but then changed to this code and it works:
<tbody md-virtual-repeat-container>
<tr md-virtual-repeat="user in Impl.users">
<td>{{::user.fname}} {{::user.lname}}</td>
</tr>
</tbody>
Although this crappy directive creates div inside tbody and it breaks table rendering. Same shit as with md-tabs.
Related
I have a table where I'm listing my restaurants
<table class="table">
<tbody>
<tr ng-repeat="row in restaurantList">
<td><img src="{{row.image}}"></td>
<td>{{row.name}}</td>
</tr>
</tbody>
<table>
I'm getting all the names and photos correctly. But how can I paginate the collected data, 10 by 10 in bootstrap without plugins ?
If you are using both angularjs and bootstrap, it would be interesting for you to also use the bootstrap-ui library.
It is really easy to use and it provides a lot of UI components (one of them is a pagination directive).
I don't know if it is what you mean when you say "without plugins" ? That's just one js file to load in your site, and you already have all the required dependencies.
I hope it helps
I am displaying Errors on my Html page using Angular JS. The problem is I am receiving only error codes from the HTML . What are the various ways in which i can change the error code to the the Error text i like
<table>
<tr ng-repeat='item in errorsd'>
<td align="left" class="validationMsg"> {{item.message}}</td></tr>
</table>
If my item.message has one . I would like to display Beginner ,if its 2 Intermediate like that and so on . Should i use ng-if ? should i use ng-switch or should i input some logic on the controller side .
Should i use ng-if ?
ng-switch is more readable and hence a better option. Later when you look back at the code it will be intuitive to you and other developers about what this code does.
should i input some logic on the controller side .
Why put a logic in controller-side if the framework already provides a solution for such use-case?
I would do it like:
<table>
<tr ng-repeat='item in errorsd'>
<td ng-switch="item.message" align="left" class="validationMsg">
<span ng-switch-when="1">Beginner</span>
<span ng-switch-when="2">Intermediate</span>
<!-- and so on.. -->
</td>
</tr>
</table>
I say use a switch statement inside of your controller.
So depending on the value, the global message would change thus displaying the correct one when triggering the validation msg box to show.
I have a table that uses ng-repeat-start and ng-repeat-end every two table rows, like this:
<table>
<tr>... // other <tr>'s without ng-repeat
<tr ng-repeat-start="parameter in ctrl.parameters">
<td>Name</td>
<td>{{parameter.name}}</td>
</tr>
<tr ng-repeat-end>
<td>Value</td>
<td>{{parameter.value}}</td>
</tr>
</table>
This AngularJS application is deployed in Karaf as a Hawtio plugin and ng-repeat-start-end part doesn't work. Maybe because it's a plugin. Other table rows (without ng-repeat) works and shows the data binded. The odd thing is, a single entry for the label Name and Value still appears, but without the expression evaluated, whether there is or no data bound to the two element rows. What's the reason behind this?
I'm considering to use a custom directive in the js module instead of placing ng-repeat-start and ng-repeat-end in the html. Could someone show how to do this the custom directive way?
Thanks.
I have solved my own question. Karaf's Hawtio uses AngularJS version 1.1.5 (as of this writing), which do not have ng-repeat-start and ng-repeat-end yet. So, what I did is to enclose the repeating two rows in another <tbody> (multiple <tbody>s is working in HTML5) and put ng-repeat directive there. Like this:
<tbody>
.
.
.
</tbody>
<tbody ng-repeat="entry in data.entries">
<tr>
<td>Name</td>
<td>{{entry.name}}</td>
</tr>
<tr>
<td>Value</td>
<td>{{entry.value}}</td>
</tr>
</tbody>
angular-tablesort is saving me a lot of time, but i'm hitting a bug where I can't get the header to become sortable even though I am following the examples and adding the classes. My code looks like this:
<table class="table" ts-wrapper>
<thead>
<tr>
<th class="tablesort-sortable" ts-criteria="Name|lowercase" ts-default>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items" ts-repeat>
<td>{{item.data.title}}</td>
</tr>
</tbody>
</table>
Solved!
As I was working through how best to present this to you guys I realized that this was an RTFM problem. I was confused by the fact that the example matches the ts-criteria with the div contents and didn't match the ng-repeat contents fully. angular-table actually lets you pass in item.data.title or data.title to get a sortable table.
A little embarrassing, but I'm still going to post this in case someone else comes across the same issue. This has nothing to do with bootstrapped angular applications, which was my first hunch. Changed the title to be more generic (from Angular-tablesort breaks when angular is bootstrapped to Angular-tablesort breaks).
Getting this error when a page is being loaded with angular js in IE9. No issues with Chrom/FF.
"Unable to get value of the property 'nodeName': object is null or undefinedundefined"
Any pointers would help.I thought this was fixed as part of Angular js 1.0.1 release.
I got this error in IE9 when I accidentally had the following illegal markup.
<table>
<h3>foo</h3>
..... blah
</table>
Maybe run a html lint to make sure you're not violating any rules like that.
The problem was:
<table>
<tr ng-repeat="p in list">
<td>{{p.f1}}</td> {{p.f2}}
</tr>
<table>
Remember <tr> should contain only <td> tag not any another tag or raw text according to the HTML specification. Modern browsers (including IE 10) can deal with that mistake but in IE 9 angular raises an error.
Most probably you messed up with the syntax inside the
<table> <SOMETHING> </table>
I suggest you copy the DOM from browser and do a check on the https://validator.w3.org/check .
Look for errors like : document type does not allow element "SOMETHING" here; missing one of "TH", "TD" start-tag .
I got this error on angular-perf.js. If you add an conditional comment to exclude IE, it will work, but you won't be able to use angular-perf in IE.
For me the culprit was a thead tag in the table:
<table>
<thead>bla</thead>
...
</table>
For me, it was a case of having a table row inside of a div. I was fine as soon as I removed the intervening div.
<table>
<div>
<tr></tr>
</div>
</table>
for me the issue was << before Back hyperlink. I used htmllint and resolved all illegal mark up error except the ones for angular.
I had the same problem and it was because in a <table> I had put some <h3> not wrapped in <tr> and <td>, and also, I have some <br> and <br/> tags, which should better be <br />, for XHTML's sake.