2016-10-25 14 views
0

この簡単なコードはうまくいきました。angularjsの再利用機能

HTMLコード:

<div class="iconbar" ng-controller="icons"> 
    <span ng-click="iconclk()">icon</span> 
    <div ng-if="icon1">value</div> 
</div> 

とJS:

app.controller('icons', function($scope) 
{ 
    $scope.icon1 = false; 
    $scope.iconclk = function(){ 
         if(!$scope.icon1) $scope.icon1 = true; 
         else $scope.icon1 = false; 
        }; 
}); 

今問題は、私は同じ機能を使用するiconclkにパラメータとしてicon1を渡す習慣ということです複数のアイコン(アイコン1、アイコン2、アイコン3 ...) 私はこれを試しました:

HTML:

<div class="iconbar" ng-controller="icons"> 
    <span ng-click="iconclk(icon1)">icon</span> 
    <div ng-if="icon1">value</div> 
</div> 

とJS:

app.controller('icons', function($scope) 
{ 
    $scope.icon1 = false; 
    $scope.iconclk = function(icon){ 
         if(!icon) icon = true; 
         else icon = false; 
        }; 
}); 

しかし、動作しません。いくつか助けてください?前もって感謝します!

+0

正確には機能しません。 –

答えて

0

主な問題は値渡しであるため、iconの変更はicon1に変更されません。代わりに、私は、インデックスによって配列および参照に自分のアイコン変数を変更します

app.controller('icons', function($scope) { 
    $scope.icon = [false, false, false]; // or just [] if you want it to be simple 
    $scope.iconclk = function(icon) { 
    $scope.icon[icon] = !$scope.icon[icon]; 
    }; 
}); 

<div class="iconbar" ng-controller="icons"> 
    <span ng-click="iconclk(1)">icon</span> 
<div ng-if="icon[1]">value</div> 
</div> 

その他iconclk(2) & icon[2]iconclk(3) & icon[3]、およびように...

コントローラになります

関連する問題