在 AngularJS 中使用一个函数控制两个 span 标签答案

【问题标题】：Control two span tags using one function in AngularJS在 AngularJS 中使用一个函数控制两个 span 标签
【发布时间】：2015-08-11 14:38:07
【问题描述】：

我有两个 span 标签和两个 p 标签，例如：

<span class="span1" ng-click="show()">Span_1</span>
<p class="p1" ng-show="var1">P_1</p>
<span class="span2" ng-click="show()">Span_2</span>
<p class="p2" ng-show="var1">P_2</p>

我为此使用 AngularJS，所以我想要实现的是制作一个函数，例如上面显示的 show() 来切换两个 p 标签我该如何实现？这是我的 JavaScript 代码：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.var1 = false;
    $scope.show = function() {
        $scope.var1 = $scope.var1 === false ? true: false;
    };
});

点击 Span_1 后，只有与它对应的 p 标签应该与 Span_2 显示相同，我应该只通过一个函数来实现。

这是 Plunker：http://plnkr.co/edit/fzgpV68Q7UnHGHmHffZZ?p=preview

【问题讨论】：

标签： javascript angularjs show-hide

【解决方案1】：

从 html 传递变量。您还可以添加案例以制作 ng-class 或 etc 等。

//Angular 代码(js)

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.variableList = [{state:true},{state:false}];
    $scope.show = function(what,where) {
        switch(what){
          case 'display':
            return $scope.variableList[where].state;
            break;
          case 'click':
            $scope.variableList[where].state = !$scope.variableList[where].state;
            break;
          case 'class':
            return ($scope.variableList[where].state ? 'active' : '');
            break;
        }
    };
});

用法（HTML）：

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="item in variableList">
    <span ng-class="show('class',$index);" ng-click="show('click',$index)">Span_{{$index+1}}</span>
    <p ng-class="show('class',$index);" ng-show="show('display',$index)">P_{{$index+1}}</p>
  </div>
</div>

【讨论】：

动态标签的更新代码添加了上面的更新代码和plunker

【解决方案2】：

您还可以编写切换跨度可见性的切换方法。前 -

<html ng-app='myApp' >
  <body ng-controller="myCtrl">
<span class="span1" ng-click="toggle()">Span_1</span>
<p class="p1" ng-show="var">P_1</p>
<span class="span2" ng-click="toggle()">Span_2</span>
<p class="p2" ng-show="!var">P_2</p>
    </body>
  </html>

JS -

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.var = true;
    $scope.toggle = function() {
        $scope.var = !$scope.var;
    };
});

【讨论】：

【解决方案3】：

您可以将跨度号作为参数传递给函数，而不是基于参数更改$scope.var1 或$scope.var2。函数会是什么样子？：

function show(varParam) { 
    if (varParam === 1) {
        $scope.var1 = !$scope.var1; //flip value    
    } else {
        $scope.var2 = !$scope.var2;
    }
}

然后在模板中，您在函数调用期间传递参数，如下所示：

ng-click="show(1)"

Working Plunkr

【讨论】：

如果我有两个以上的 span 标签，我应该怎么做？
您可以创建存储 ng-show 标志的对象，例如 $scope.vars = {} 然后在模板 ng-show="vars[1]"、ng-show="vars[2]" ... 然后在函数中而不是执行 if .. 否则您可以执行 @987654330 @$scope.vars[varParam]`