0

I'm really new to all these so I don't know if I could be able to explain my problem...

Fiddle

(I don't know why it doesn't work...I'm really very new to angular and ionic)

I want to create a ng-repeat that displays all my items that are active (active=true) but also,I want to open a row every 5 items and insert the next five items, and so...till the loop ends.

I was thinking in using $index%5=0 to do that, but it doesn't filter the active=true items...how do I fix this?

PS: all of this without editing the original array, of course...

4
  • did you include angular library in the fiddle?...because it is not present in external resources Commented May 18, 2016 at 14:22
  • please see this question stackoverflow.com/questions/35441885/… Commented May 18, 2016 at 14:38
  • Yup, it doesn't work either...But in my project works, the fiddle is not the problem here anyway ^^U Commented May 18, 2016 at 14:39
  • Thank you, lodash was the big answer to my problem!! Commented May 19, 2016 at 8:05

1 Answer 1

0

try like this. use ng-src instead of src and also you should create equipment object at first.

var myApp = angular.module('myApp',[]);

function DetailCtrl($scope) {
  $scope.caravan = {equipment:[]};
	$scope.caravan.equipment = [
  {name: 'ABS (Sistema Antibloqueo)', active:true, image:"http://www.iearobotics.com/wiki/images/0/06/Icono_ok.png"},
  {name: 'Aire Acondicionado en Cabina', active:true, image:"http://www.iearobotics.com/wiki/images/0/06/Icono_ok.png"},
  {name: 'Alarma Antirrobo', active:true, image:"http://www.iearobotics.com/wiki/images/0/06/Icono_ok.png"},
  {name: 'Antena Parabólica', active:false, image:"http://www.iearobotics.com/wiki/images/0/06/Icono_ok.png"},
  {name: 'ASR (Sistema de Tracción Antideslizante', active:false, image:"http://www.iearobotics.com/wiki/images/0/06/Icono_ok.png"},
  {name: 'Calefacción en habitáculo', active:true, image:"http://www.iearobotics.com/wiki/images/0/06/Icono_ok.png"},
      {name: 'ABS (Sistema Antibloqueo)', active:true, image:"http://www.iearobotics.com/wiki/images/0/06/Icono_ok.png"},
  {name: 'Aire Acondicionado en Cabina', active:true, image:"http://www.iearobotics.com/wiki/images/0/06/Icono_ok.png"},
  {name: 'Alarma Antirrobo', active:true, image:"http://www.iearobotics.com/wiki/images/0/06/Icono_ok.png"},
  {name: 'Antena Parabólica', active:false, image:"http://www.iearobotics.com/wiki/images/0/06/Icono_ok.png"},
  {name: 'ASR (Sistema de Tracción Antideslizante', active:false, image:"http://www.iearobotics.com/wiki/images/0/06/Icono_ok.png"},
  {name: 'Calefacción en habitáculo', active:true, image:"http://www.iearobotics.com/wiki/images/0/06/Icono_ok.png"}
  ];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" class="caravan-equipment" ng-controller="DetailCtrl">
  <div class="row">
    <h3>EQUIPMENT</h3>
  </div>

  <div class="row">
    <div ng-repeat="equipment in caravan.equipment">
      <div ng-if="equipment.active" class="col col-20 icon-equipment">
        <img ng-src="{{equipment.image}}"/>
      </div>
     
      <br ng-if="$index %6 == 0 && $index != 0">
    </div>
  </div>
</div>

Sign up to request clarification or add additional context in comments.

3 Comments

did you see my answer?
Yeah, I copied your code in fiddle and it doesn't work ^^U...Again, in my project works fine, that's not the problem...
NO . not problem. may be in fiddle angular files not loaded.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.