使用AngularJS中的一个函数控制两个span标签
[英]Control two span tags using one function in AngularJS
问题描述
I have two span tags and two p tags such as: 
我有两个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>
I am using AngularJS for this so what I want to achieve is to make a single function such as show() shown above to toggle the both the p tags how can i achieve that? 我为此使用AngularJS，所以我要实现的是使单个函数（如上面显示的show（））同时切换两个p标签，我该如何实现呢？ Here is my JavaScript code: 这是我的JavaScript代码：
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.var1 = false;
$scope.show = function() {
$scope.var1 = $scope.var1 === false ? true: false;
};
});
Upon clicking on Span_1 only p tag corresponding to it should show same as for Span_2 and I should achieve that only by one function. 在单击Span_1时，与之对应的p标签应该与Span_2相同，我应该仅通过一个功能来实现。
Here is the Plunker: http://plnkr.co/edit/fzgpV68Q7UnHGHmHffZZ?p=preview 这是Plunker： http ://plnkr.co/edit/fzgpV68Q7UnHGHmHffZZ?p=preview
3 个解决方案
解决方案1
1 2015-08-11 14:45:14
You can pass span number as a parameter to function and than based on parameter change $scope.var1 or $scope.var2 . 您可以将跨度号作为参数传递，然后根据参数更改$scope.var1或$scope.var2 。 Function will look like?: 功能会是什么样子？：
function show(varParam) {
if (varParam === 1) {
$scope.var1 = !$scope.var1; //flip value
} else {
$scope.var2 = !$scope.var2;
}
}
Then in template you pas param during the function call like this: 然后在模板中，您可以在函数调用过程中使用以下参数：
ng-click="show(1)"
解决方案2
1 已采纳 2015-08-11 14:50:38
Pass variables from html. 从html传递变量。 You can also add cases to make like ng-class or etc and on. 您还可以添加案例，例如ng-class或etc等。
//Angular code(js) //角度代码（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;
}
};
});
Usage(HTML): 使用（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>
解决方案3
1 2015-08-11 14:56:43
You can also write toggle method which toggle the visibility of span. 您还可以编写切换范围的可见性的切换方法。 Ex - 前-
<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 - JS-
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.var = true;
$scope.toggle = function() {
$scope.var = !$scope.var;
};
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.