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.
Related
I am getting stuck in horizontal table(apex) which I need to share inside the email template.Table structure would be like below:
Html Table
Earlier, I am giving space between them by using ensp; or nbsp; but whenever the data is filling out in these fields, their alignment is not coming correctly.So that I need table instead of using these ( or )
I'm going to make a couple of assumptions here. If these assumptions are wrong, you're kind of SOL.
that you're using a Visualforce Email template
that your comfortable writing both the visualforce and the apex controller
You're aware of how to get a handle on the necessary objects and fields you want to display
If those three things are true, this is actually just an example of how weird visualforce can be.
Visualforce allows you to mix in regular HTML, so the HTML for a table like your image would look something like this:
<table>
<tbody>
<tr>
<td colspan="2">OpportunityNameVar</td>
</tr>
<tr>
<td>AccountNameVar</td>
<td>Opp Type</td>
</tr>
<tr>
<td>Phone</td>
<td>CloseDate</td>
</tr>
</tbody>
</table>
I've faced following issue:
I have a <table>, where <tr>'s a generated via ng-repeat, and each <tr> contains several <input> elements. Smth like this:
<table>
<tr ng-repeat="plan in plans">
<td>
<input ng-pattern="/^\d+((\.|\,)\d+)?$/" ng-model="plan.field1" ng-blur="updateRow(plan)">
</td>
<td>
<input ng-pattern="/^\d+((\.|\,)\d+)?$/" ng-model="plan.field2" ng-blur="updateRow(plan)">
</td>
</tr>
</table>
When user finishes editing input I want to update full row. But I want to do it only if this input is valid. I mean I want to execute updateRow(plan) only if this condition ng-pattern="/^\d+((\.|\,)\d+)?$/" is satisfied. Or maybe somehow check it within updateRow(). But I can't find a way to do it without forms.
1)Is there a way to do it? Or may be there is better way to implement my idea?
2)And also is there way to bind ng-blur to each input in a row? Because I have about 20 inputs in a row and it looks bad when there is such amount of repeating.
Thanks to everybody in advance!
So I solved the first question by using forms and ng-form. I put every tr element in separate tbody and applied ng-form to each tbody element.
So i believe that I have to use forms if I need validation.
Basically I am attempting to do is allow the user to choose to show dollar formatting or not. Easy enough, just use ng-class to toggle the class, right? Except that now in empty cells a dollar sign shows.
What about if we use a custom filter? Well, I don't really know a way to toggle the custom filter on or off.
Any suggestions would be helpful.
Here is the button that toggles the formatting (it runs a function that sets format to true or false).
<button class="btn format-toggle" ng-click="setFormat();">Show <span ng-show="format">Hours</span><span ng-hide="format">Dollars</span></button>
The code that I'm trying to affect
<table>
<tr ng-repeat="project in projects">
<td>{{project.name}}</td>
<td ng-repeat="month in project.months" ng-class="{dollar : format}">{{month.total}}</td>
</tr>
</table>
I actually answered my own question but I suppose I'll leave it up in case someone else finds it useful.
I ended up just using ng-class along with another condition to check that there was a value in the cell.
<td ng-repeat="month in project.months" ng-class="{dollar : format && month !== undefined}">{{month.total}}</td>
CSS:
.dollar:before{
content:'$';
}
<td id="ext-gen383" class="x-toolbar-cell">
<table id="ext-comp-1144" class="x-btn x-btn-icon" cellspacing="0">
<tbody class="x-btn-small x-btn-icon-small-left">
<tr>
<tr>
<td class="x-btn-ml">
<td class="x-btn-mc">
<em class=" x-unselectable" unselectable="on">
**<button id="ext-gen384" class="x-btn-text x-tbar-page-last" type="button">** </button>
</em>
I tried to click the button. Please see the html above. Tried so many ways.
eg:
//*[contains(#class,'x-btn-text x-tbar-page-last')] or
//button[contains(#class,'x-btn-text x-tbar-page-last')]
But still not working.
I'm guessing that only the number at the end is generated. Try:
By.cssSelector("em.x-unselectable > button[id^='ext-gen']")
Also, looking at that <em>, are you sure that that class isn't making the button NOT clickable? By the name, it looks like it disables clicks.
Its hard to tell without seeing the full html of the page. Since ExtJS generates random ids, there really are not any good properties to use for finding the element.
I would recommend just using an XPath, and then use an index (if your page has multiple button elements):
//button[1]
And adjust the index accordingly until you get the correct button to click.
Likewise, you could use the WebDriver API for driver.findElements, which will return a collection of all matching items, and then you could apply the index to that collection to get the correct button.
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.