How to calculate a transaction in ng-if and put a `
` only if the condition is true?

Question

i want to add a row only if the x in $scope.grp leaves no remainder when divided by 3. I was trying the following code.

 <div class="card">
  <div ng-repeat="x in grp">
     <div class="row">
        <div ng-if="x%3==0">
           <div class="row">
        </div>
    <div class="col col-33">
       /my rest of code here/
     </div>
     </div>
   </div>
<div>

any suggestions how to do it?

@zan `app.controller("creatMessageController",function($scope,$http,$cookies) { var userId=$cookies.get('userId'); var password=$cookies.get('password'); $http.get("http://www.mysite.in/userGroups/1/100?userId="+userId+"&password="+password) .then(function(response){$scope.grp=response.data.msg;},function() { location.assign("error.html"); })` — Vaibhav Rakheja, Dec 16 '15 at 11:50
@jithin i need suggestion to make it work. i need to break the flow and add a `
` so that i have a symmetric `
` . — Vaibhav Rakheja, Dec 16 '15 at 11:52
Do you by any change actually want to wrap every three values/columns in a row div? — Ionut Costica, Dec 16 '15 at 12:14
@IonutCostica Yes. i have a another card of 33(col) width. I want to wrap 3 such cols in one div row. — Vaibhav Rakheja, Dec 16 '15 at 12:16
Possible duplicate of [how to split the ng-repeat data with three columns using bootstrap](http://stackoverflow.com/questions/21644493/how-to-split-the-ng-repeat-data-with-three-columns-using-bootstrap) — Ionut Costica, Dec 16 '15 at 12:48
In that case, the question is a duplicate of http://stackoverflow.com/questions/21644493/how-to-split-the-ng-repeat-data-with-three-columns-using-bootstrap . Take a look there, it has a great answer on how to achieve what you want. — Ionut Costica, Dec 16 '15 at 12:49

score 1 · Accepted Answer · answered Dec 16 '15 at 12:34

Not sure whether the following is correct or not. But a way to achieve it is as following.

<div data-ng-app="" data-ng-init="grp=['one','two','three','four','five','six','seven']" class="container">
  <div ng-repeat="x in grp" ng-if="$index % 3 == 0" class="row">
     <div class="col-xs-3">{{grp[$index]}}</div>
     <div class="col-xs-3" ng-if="$index + 1 < grp.length">{{grp[$index+1]}}</div>
     <div class="col-xs-3" ng-if="$index + 2 < grp.length">{{grp[$index+2]}}</div>
   </div>
<div>

I am assuming grp is a string array and used $index to group.

Jsfiddle

using $index has somehow solved my problem trying the later part of it now. Hope it works. Thanks a lot. :) — Vaibhav Rakheja, Dec 17 '15 at 05:39

score 0 · Answer 2 · answered Dec 16 '15 at 11:50

Check this: if reminder is 0, row will be added

<div class="card">
<div ng-repeat="x in grp">
  <div class="row">
    <div ng-if="x%3==0">
      <div class="row">
        reminder 0
      </div>
    </div>
    <div class="col col-33">
      my rest of code here
    </div>
  </div>
</div>

Here is the code for controller

function ctrl($scope){
   $scope.grp=[1,2,3];   
}

Codepen : http://codepen.io/anon/pen/eJJKwr

score 0 · Answer 3 · answered Dec 16 '15 at 12:44

I'm not very familiar with angularjs - however your html struct is wrong in this case. Your struct will create an empty "row" column before every third div. I don't know if there is a way to just open a "div" tag in an ng-if and close it at a later point.

You should consider just creating array chunks for your cards. So each chunk will hold 3 cards and then you can loop over the first level of chunks, and then over the second level of your array. It will look something like that:

<div class="card">
    <div ng-repeat="grp in chunks">
        <div class="row">
            <div ng-repeat"x in grp"> // as mentioned, I got no clue about angularjs, so I don't know how to correctly address the values within the groups
                <div class="col col-33">
                    my rest of code here
                </div>
            </div>
        </div>
    </div>
</div>

As mentioned before I have no clue about angularjs itself, however you should be able to create chunks (split your array into smaller arrays) like:

var chunks=[[1,2,3],[4,5,6],[7,8,9]];

How to calculate a transaction in ng-if and put a `` only if the condition is true?

3 Answers3

How to calculate a transaction in ng-if and put a `
` only if the condition is true?