Simplify AngularJS scope with a loop

Question

I am trying to simplify a script with a loop, but I can't get it to work.

I want to convert the following working code and make it shorter to show/hide a div.

var app = angular.module('myApp', ['ngAnimate']);              
app.controller('onderdelenCtrl', function($scope) { 

$scope.spec1 = true;  
$scope.spec2 = true;  
$scope.spec3 = true;

...

$scope.spec9 = true;  
$scope.togglespec1 = function() {              
$scope.spec1=!$scope.spec1; }             
$scope.togglespec2 = function() {              
$scope.spec2=!$scope.spec2; }        
$scope.togglespec3 = function() {              
$scope.spec3=!$scope.spec3; }

...

$scope.togglespec9 = function() {              
$scope.spec9=!$scope.spec9; }    
});

Into something like:

var onderdelenlijst = ["processor", "moederbord", "video", "opslag", "geheugen", "behuizing", "voeding", "dvd", "geluid"];

var indexonderdelenlijst = onderdelenlijst.length;

var app = angular.module('myApp', ['ngAnimate']);             
app.controller('onderdelenCtrl', function($scope) {
i=0;
while (i < indexonderdelenlijst) {
i++;
var spec = $scope.spec + i;
spec = true;  
togglespec = $scope.togglespec + i;
togglespec = function() {              
spec =! spec; }         
}
});

I don't know what I am doing wrong, I have tried multiple things, but it keeps failing somehow.

Can you add the HTML as well and maybe a fiddle demonstration? — David Barker
– David Barker, Commented Feb 29, 2016 at 15:44
Couldn't get it to work yet: here is the complete code, which I copy in the w3schools editor (link in html section) jsfiddle.net/6jmLmyek this one is the working: jsfiddle.net/Lu4cv1yn — Jozzy91
– Jozzy91, Commented Feb 29, 2016 at 16:40
I fixed it :) jsfiddle.net/fhhwLcy9 I had to change some things in the html aswel. I used all the solutions below combined and it works, so thanks everyone! But Sandeep you indeed had the best solution :) — Jozzy91
– Jozzy91, Commented Feb 29, 2016 at 16:51

Sandeep · Accepted Answer · 2016-02-29 15:51:33Z

1

if you get continues $scope variable then apply this method use it :

$scope['spec'+i];

not

var spec = $scope.spec + i;

$scope['spec'+i]; use it all place where you get $scope variable continues...

answered Feb 29, 2016 at 15:51

Sandeep

1,4791 gold badge13 silver badges27 bronze badges

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

Comments

Alexis · Accepted Answer · 2016-02-29 15:49:58Z

1

You don't need js code for toggle a div.

Html is adequate.

<div ng-show="showdiv1" ng-click="showdiv1=!showdiv1"></div>

<div ng-show="showdiv2" ng-click="showdiv2=!showdiv2"></div>

answered Feb 29, 2016 at 15:49

Alexis

5,8211 gold badge30 silver badges46 bronze badges

Comments

camden_kid · Accepted Answer · 2016-02-29 15:50:09Z

1

Just as an example, maybe something like this?

JS

$scope.specs = [0, 1, 2, 3];

$scope.toggle = function (index) {
    $scope.specs[index] = !$scope.specs[index];
}

Markup

<div ng-repeat="spec in specs">
    <button ng-click="$scope.toggle($index)">Toggle</button>
</div>

answered Feb 29, 2016 at 15:50

camden_kid

12.8k12 gold badges57 silver badges92 bronze badges

Comments

etiennecrb · Accepted Answer · 2016-02-29 16:02:56Z

1

You should use an array for specs and a toggle function with index as argument.

var onderdelenlijst = ["processor", "moederbord", "video", "opslag", "geheugen", "behuizing", "voeding", "dvd", "geluid"];
var indexonderdelenlijst = onderdelenlijst.length;

var app = angular.module('myApp', ['ngAnimate']);             
app.controller('onderdelenCtrl', function($scope) {

  $scope.spec = [];
  for(var i = 0; i < indexonderdelenlijst; i++) {
    $scope.spec.push(true);        
  }
  $scope.togglespec = function(index) {
    $scope.spec[index] = !$scope.spec[index];
  }
});

edited Feb 29, 2016 at 16:02

answered Feb 29, 2016 at 15:49

etiennecrb

5972 silver badges10 bronze badges

Collectives™ on Stack Overflow

Simplify AngularJS scope with a loop

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related