angularjs中的重用函數

Question

我有這個簡單的代碼，可以正常工作。

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作為參數iconclk給多個圖標（icon1，icon2，icon3 ...）使用相同的功能：

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

但是不起作用。 請幫忙嗎？ 提前致謝！

Answer 1

主要問題是您icon1值傳遞，因此修改icon不會更改icon1 。 相反，我會將您的圖標變量更改為數組，並按索引引用：

<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] ，依此類推...

控制器：

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