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.
Related
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.
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.
I am getting some server response data in two different JSON as:
userlist{id,name,type...}
and
tasklist{assign_to,tester,title,description...}
here, I need to show the task of the corresponding user.
so, I have nested the tasklist under the userlist using ng-repeat as:
<div ng-repeat="user in userList">
<table>
<tr><th>Name </th><td>{{user.name}}</td></tr>
<tr><th>Type </th><td>{{user.type}}</td></tr>
</table>
<div ng-repeat="task in taskList">
<div ng-if="task.assign_to==user.id || task.tester==user.id">
<table>
<tr><th>Title </th><td>{{task.title}}</td></tr>
<tr><th>Task Desc </th><td>{{task.description}}</td></tr>
</table>
</div>
</div>
</div>
but it's not working. As all the tasks are showing for every user.(Means ng-if is not working).
Any suggestion would be appreciated.
Angularjs code is case-sensitive. Please check variable name in scope. From the code you pasted above, the two lists should be :
userlist{id,name,type...}
and
tasklist{assign_to,tester,title,description...}
Use same in HTML. I think you are using taskList and userList (with capital L, use same name in JS and html)
All it was about the version actually. 1.0.7 doesn't support ng-if. Hence, 1.1.5 worked for me.
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).
I am running AngularJS 1.2.3 and Bootstrap3 to create a simple task list app.
The code and Bootstrap3 CSS works everywhere (IE11.x, Chrome v31.0.1650.63 m, Opera v18.0.1284.63), except FireFox 25.0.1
If I add the link to bootstrap3 via
<link href="3rdPartyLibs/bootstrap3/css/bootstrap.min.css" rel="stylesheet">
then when AngularJS ng-repeat runs to create the table rows then FireFox v25.0.1 does not render the table header or rows and display them to the user However, if you look at the source, they are being created.
Here's an image of the page and an image of the source:
It should look like this:
FireFox displays this (notice there are no rows):
In FireFox, if I click the [Add New Task] button numerous times, it actually alters the DOM as I expect it to (adding rows to the table), but it doesn't display that to the user. However, the source is altered -- rows are added to the table -- and the source looks like this:
Referencing Bootstrap2 Makes It Work
All I have to do to make it work is reference Bootstrap2 on my machine (i have both locally) by altering the link to : (notice there is no 3 in the bootstrap directory.
<link href="3rdPartyLibs/bootstrap/css/bootstrap.min.css" rel="stylesheet">
After I do that, it works in FireFox too and looks like:
Does bootstrap3 work in FireFox? Is there some special initialization I have to do?
Is Bootstrap3 not ready for prime-time, or is it FireFox?
Figured It Out While Attempting To Convert To Bootstrap2
I decided to convert this thing to work with Bootstrap2 since that would mean all browsers would work. While doing that I discovered that if I simply add a wrapper to my table, then it fixes the problem.
Here's a summary of what I had and what I did:
***note:**If you see unclosed tags, that is bec. it's a summary, please don't try to tell me I need to close those tags. It is valid HTML in the real thing. thanks.*
I had
<html>
<div>
<button1>
<button2>...
</div>
<table>
<thead>
<th>
</thead>
<tbody>
<tr ng-repeat="t in allTasks"
</tbody>
</table>
</html>
I simply wrapped my table in another div and now it works in FireFox. Looks like this:
<html>
<div>
<button1>
<button2>...
</div>
<div>
<table>
<thead>
<th>
</thead>
<tbody>
<tr ng-repeat="t in allTasks"
</tbody>
</table>
</div>
</html>
Now it looks like it should in FireFox