Javascript 使用AngularJS中的一个函数控制两个跨度标记_Javascript_Angularjs_Show Hide

Javascript 使用AngularJS中的一个函数控制两个跨度标记

javascript angularjs

Javascript 使用AngularJS中的一个函数控制两个跨度标记,javascript,angularjs,show-hide,Javascript,Angularjs,Show Hide,我有两个span标记和两个p标记，例如： Span_1 P_1 Span_2 P_2 单击

我有两个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>

单击Span_1时，对应于它的p标记应显示与Span_2相同的内容，并且我应仅通过一个功能实现这一点

以下是提示：

您可以将span编号作为参数传递给函数，然后根据参数更改

$scope.var1

或

$scope.var2

。函数的外观如下所示：

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

然后，在模板中，在函数调用过程中使用pas param，如下所示：

ng-click="show(1)"

从html传递变量。您还可以添加案例，使之像ng类等

//角度代码（js）

用法（HTML）：


Span{{$index+1}}
p{{{$index+1}

您还可以编写切换方法来切换span的可见性。前

如果我有两个以上的span标记，我该怎么办？您可以创建对象来存储您的

ng show

标志，如

$scope.vars={}

，然后在模板

ng show=“vars[1]”

，

ng show=“vars[2]”

。。。然后在函数中，而不是执行if。。否则您可以执行

$scope.vars[varParam]=

$scope.vars[varParam]`动态标记的更新代码在上面和下面添加了更新的代码

ng-click="show(1)"

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

<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>

<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>

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