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:'$';
}
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.
I was trying to use ng-disabled to disable a button but failed. Here is the HTML part:
<tr ng-repeat="eachdata in tabledb">
<td>{{eachdata.paid}}</td>
</tr>
<button class="btn btn-primary" ng-click="process(eachdata)"
ng-disabled="eachdata.paid">
The console.log showed that eachdata.paid: "0" or "1". I hope to disable the button when paid:"1".
So I also tried
<button class="btn btn-primary" ng-click="process(eachdata)"
ng-disabled="Boolean(Number('1'))">
but still it is not working.
I checked the reference of convert type in Javascript. It supposed to be true when converting number 1 to boolean and false when converting number 0 to boolean. Can anyone explain that? Thanks a lot.
I dont know why so much confusion regarding a simple thing.First as per your question button is out of scope to ng-repeat.So I assume it is includes in ng-repeat.
<tr ng-repeat="eachdata in tabledb">
<td>{{eachdata.paid}}</td>
<td><button class="btn btn-primary" ng-click="process(eachdata)"
ng-disabled="checkIfDisabled(eachdata.paid)"></td>
</tr>
In controller define checkIfDisabled function
$scope.checkIfDisabled=function(paid){
return (paid == "1");
}
You are closing the repeated table row before the button, therefore your "eachdata" variable isn't available to the button scope. Include the button inside the td, or elsewhere within the scope of the tr.
Your button is out of scope from the ng-repeat. If you want the button outside of your table you can maybe use a dummyTag and run the ng-repeat inside it.
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.
The form to be validated is master detail i.e. it has two portions. master portion contains two fields while detail portion initially has two rows but they can be increased by pressing a button on DOM. The form looks like the following
The problem is that in detail portion I have to create the inputs using ng-repeat like
<div class="form-group">
<table style="margin-left:10%;">
<tr>
<th>Account id</th>
<th>Amount</th>
</tr>
<tr class="edit-row" ng-repeat ="entry in model.Entries">
<td>
<input type="text" ng-model="model.Entries[$index].AccountId" required name="Entries[{{$index}}].AccountId"/>
</td>
<td>
<input type="text" ng-model="model.Entries[$index].Amount" required name="Entries[{{$index}}].Amount"/>
<span class="field-validation-error text-danger" ng-show="transactionForm['Entries['{{$index}}'].Amount'].$invalid && transactionForm['Entries['{{$index}}'].Amount'].$dirty">
Amount is Required
</span>
</td>
</tr>
</table>
</div>
But the ng-show attribute is not working fine for the detail portion. This is because, I have dots (.) and brackets ([) in the name of input fields. How can I perform validation in such scenario. Someone may argue to change the names of the input but I have to use this convention for input names in the detail portion. In current code, I have used bracket notation in ng-show attribute of Amount field as described in This SO question, but to no avail. you can find complete example at plunker
Can you do something like this?
ng-show="model.Entries[$index].Amount === ''"
Rather than trying to check the form value check the actual model value. This will work assuming you are just checking to make sure there is a value other than the empty string. You will have to make the check more specific to what you are looking for. You can also set the type="number" if you only want to allow the user to enter a numeric value.
I need to show a non-breaking space in a table cell if a value is empty. This is my template:
<td class="licnum">{{participant.LicenseNumber}}</td>
I've tried this, but it doesn't work:
<td class="licnum">{{participant.LicenseNumber} || "$nbsp;"}</td>
Here's the problem with it returning null values:
If License Number comes over with null value, the cell is empty and the row coloring looks like this.
Using lucuma's suggestion, it shows this:
After changing the if statement in the filter, still doesn't show non-null values:
What you have should work. You are missing a closing } and have one in the middle of the expression that needs to be removed.
Here is a demo showing your solution working and an ng-if. http://plnkr.co/edit/UR7cLbi6GeqVYZOauAHZ?p=info
A filter is probably the route to go, but you could do it with a simple ng-if or ng-show (either on the td or even on a span):
<td class="licnum" ng-if="participant.LicenseNumber">{{participant.LicenseNumber}}</td>
<td class="licnum" ng-if="!participant.LicenseNumber"> </td>
or
<td class="licnum"><span ng-if="participant.LicenseNumber">{{participant.LicenseNumber}}</span><span ng-if="!participant.LicenseNumber"> </span></td>
I'm offering this up as an alternate solution that doesn't require adding code to a controller/filter.
You can read up a little about this method: if else statement in AngularJS templates
angular.module('myApp',[])
.filter('chkEmpty',function(){
return function(input){
if(angular.isString(input) && !(angular.equals(input,null) || angular.equals(input,'')))
return input;
else
return ' ';
};
});
Just as #Donal said in order for this to work you'll need to use ngSanitize's directive ng-bind-html like this:
<td class="licnum" ng-bind-html="participant.LicenseNumber | chkEmpty"></td>
EDIT:
Here's a simple example: http://jsfiddle.net/mikeeconroy/TpPpB/