How to edit angular variables inside the markup?

Question

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

(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...

did you include angular library in the fiddle?...because it is not present in external resources — swarnava112
– swarnava112, Commented May 18, 2016 at 14:22
please see this question stackoverflow.com/questions/35441885/… — swarnava112
– swarnava112, 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 — Sephy
– Sephy, Commented May 18, 2016 at 14:39

Hadi · Accepted Answer · 2016-05-18 14:36:38Z

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>

edited May 18, 2016 at 14:36

answered May 18, 2016 at 14:20

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

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

3 Comments

Hadi Over a year ago

did you see my answer?

Sephy Over a year ago

Yeah, I copied your code in fiddle and it doesn't work ^^U...Again, in my project works fine, that's not the problem...

Hadi Over a year ago

NO . not problem. may be in fiddle angular files not loaded.

Collectives™ on Stack Overflow

How to edit angular variables inside the markup?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related