For some condition, I would like replace a String in my model when displaying it in html. I could do this my modifying my model, but is there a more idiomatic option? Possibly this should be done with a filter?
<tr ng-repeat="i in ctrl.data" >
<td>
<div ng-show="i.category == 'default'">
none
</div>
<div ng-show="i.category != 'default'">
{{ i.category }}
</div>
</td>
</tr>
{{ i.category == 'default' ? 'none' : i.category }}
Or, if you have that in several places, use a filter.
Related
Using Angularjs, I need to compare the value of $index to $parent.$index in a nested ng-repeat and set the value of the class according to this result. This is what I am currently trying-
<td ng-repeat="d in vm.users track by d._id"
ng-class="{showBottomLine : less, showSides : more, showBottomSideLine : equals }">
<div ng-if="$index < $parent.$index" ng-class="showBottomLine">less</div><!--ng-model="less"-->
<div ng-if="$index > $parent.$index" ng-class="showSides">more</div>
<div ng-if="$index === $parent.$index" ng-class="showBottomSideLine">equals</div>
</td>
The syntax for ng-class is as follows:
<p ng-class="{strike: deleted, bold: important, 'has-error': error}">Map Syntax Example</p>
In your case
$parent.$index" ng-class="{'showSides': $index == $parent.index}">
I am converting MVC to AngularJS. I have a model passed to the View and I take the model and used LINQ to group into set of 4 items.
So, if I have 12 records, I will get 3 sets of 4 records. Reason. I am insert 4 records per row in a table. Here is the MVC code
#foreach (var productGroup in ((Model.Select((e, i) => new { Product = e, Grouping = (i / 4) }).GroupBy(e => e.Grouping))
{
<tr>
#foreach (var product in productGroup)
{
<td>
<div><br /></div>
<img src=#product.Product.Thumbnail style="width: 200px; height: 200px" />
<div><br /></div>
<div class="col-md-6">
<p><strong>#product.Product.DescriptionLine1<br></strong></p>
<p><small>#product.Product.DescriptionLine2<br></small></p>
</div>
</td>
}
</tr>
}
So far in AngularJS, I converted the code to
<tr ng-repeat="item in listItems">
<td>
<img ng-src="{{item.thumbnail}}" style="width: 100px; height: 100px"/>
<div><br/>
</div>
<div small>
<span ng-bind="item.descriptionLine1"></span><br/>
<span ng-bind="item.descriptionLine2"></span><br>
<br>
</div>
</td>
</tr>
How do I use LINQ to group into sets of 4 for listItems? If I can't use LINQ, how else can I perform the grouping? Thanks.
Here is a small example which displays 4 records per row.However please note there can be also better approach and am sure experts would enlighten that.
I have assumed you have $scope.items = ['a', 'b', 'c', 'd','e','f','g','k','k','l','k']; for simplicity as I don't know the real structure.You can modify accordingly.
Now you can use angular $index to limit 4 records each row like this.This way you break on 4th record each time on loop.
<div ng-repeat="_ in items">
<span ng-show="($parent.$index % 4 == 0) && ($parent.$index + 4 > $index) && ($parent.$index <= $index)" ng-repeat="item in items">
<span ng-show="1">
{{item}}
</span>
</span>
</div>
Here is a jsFiddle example on same.
I'm getting Bool value from database to angularJs
<td>
{{patient.Alcoholic}}
</td>
instead of false or ture i need to print YES or NO
<td>
{{patient.Alcoholic // can i have if-else condition over here ??}}
</td>
<td>
{{true == patient.Alcoholic ? 'Yes' : 'No' }}
</td>
This should work!
use ng-if directive
<td ng-if="patient.Alcoholic">Yes</td>
<td ng-if="!patient.Alcoholic">NO</td>
Simply do
<td>
{{ patient.Alcoholic ? 'Yes' : 'No' }}
</td>
Try to not put JS operations in your template, as it will:
Make your template dirty (imho).
Strain the application (very minor argument), as the evaluation is being run on each $digest cycle.
If you are fine with modifying the original bool of the patient:
$scope.patient.Alcoholic = !!$scope.patient.Alcoholic ? 'Yes' : 'No';
If not, I would add another property onto patient:
$scope.patient.isAlcoholic = !!$scope.patient.Alcoholic ? 'Yes' : 'No';
And then in your view (dependent on the solution you've chosen of the two above):
{{ patient.Alcoholic }}
<!-- or -->
{{ patient.isAlcoholic }}
That's my two cents on keeping your template clean.
I have a table containing some data. And i have to filters on this data.
When, after filtering data, there is no results, i want to show a "no results" message, and it works.
But i also want to hide the table completely when there are no results.
Here is a demo :
http://plnkr.co/edit/iSbr9Ij4wsX947JqAsEB?p=preview
I tried :
<table ng-if="results.length > 0">
But that gave me a js error
Is there a way to hide the table if there are no results to show ?
Thanks a lot
this does not feel right, but it works :)
<tr ng-repeat="x in accueils | filter:{annee:annee.id} | filter:myFilter as results" ng-if="$first">
<th>column1</th>
<th>column2</th>
</tr>
EDIT This feels nicer .
<header ng-repeat-start="item in items">
Header {{ item }}
</header>
<div class="body">
Body {{ item }}
</div>
<footer ng-repeat-end>
Footer {{ item }}
</footer>
I have an ng-repeat that requires nested interpolation to be evaluated. Here is an example:
<div ng-repeat="i in ['1', '2', '3']">
should evaluate to {{ i }}: {{ (i>0) && ( {{ i }} ) || false }}
</div>
This throughs a $parse error. The problem I figure is that Angular can't perform nested evaluation operations, or support nested interpolation.
Is there a way around this problem?
I had a similar issue when trying to create a dynamic table component. With the following code I'm able to display any table from the database on the front end without having to define anything thanks to nested interpolation.
You just need to use square brackets for the nested interpolation.
E.G: {{row[[col.column_name]]}}
<table id="dynamicTable" class="table table-hover" cellspacing="0">
<thead>
<tr>
<th *ngFor="let col of Columns">{{col.column_name}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of Table">
<td *ngFor="let col of Columns">{{row[[col.column_name]]}}</td>
</tr>
</tbody>
</table>
Hope this helps! (Working with Angular 7)
It's giving you parse error because you can't nest {{}}..
{{ code }} basically tells angular that whatever is inside {{ }} (code in my case) is JavaScript, and js doesn't understand {{ }} syntax. This is why second {{ i }} is causing a problem.
You might also want to look at ngRepeat docs - there are some special properties, like $index, that you can use.. https://docs.angularjs.org/api/ng/directive/ngRepeat
I can't understand what's this {{ i }}: {{ (i>0) && ( {{ i }} ) || false }} statement is about , also you cannot have nested {{}} in angular js.
Are you trying to make
Working Demo
<div ng-controller="MyCtrl">
<div ng-repeat="i in ['0','1', '2', '3']">
{{ i>0 ? true: false }}
</div>
</div>
The result of what's in the {{}} will be printed - no need to nest:
<div ng-repeat="i in ['0','1', '2', '3']"> {{ i > 0 ? i : false }} </div>