Упростить область AngularJS с петлей

Question

Я пытаюсь упростить скрипт с помощью цикла, но я не могу заставить его работать.

Я хочу преобразовать следующий рабочий код и сделать его короче, чтобы показать/скрыть 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; }  
});  

В чем-то вроде:

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; }   
} 
});  

Я не знаю, что я делаю неправильно, я попробовали несколько вещей, но он все равно терпит неудачу.

Answer 1

если вы по-прежнему то $ сфера переменной применить этот метод использовать его:

$scope['spec'+i]; 

не

var spec = $scope.spec + i; 

$ scope ['spec' + i]; использовать все это место, где вы получаете переменную $ scope продолжается ...

Answer 2

Вы должны использовать массив для спецификаций и функцию переключения с индексом в качестве аргумента.

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]; 
    } 
}); 

Answer 3

Вам не нужен код js для переключения div.

Html адекватен.

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

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

Answer 4

Как пример, может быть, что-то вроде этого?

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>