我正在尝试使用 ng-show 分别显示和隐藏连续的 div。
这是我的代码:
angularExample.html
<!DOCTYPE html>
<html ng-app="Fino">
<head>
<link rel="stylesheet" type="text/css" href="scripts/bootstrap.min.css" />
<script type="text/javascript" src="scripts/angular.min.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
</head>
<body ng-controller="FinController as fin">
<ul ng-repeat="emp in fin.employees" ng-show="fin.showDiv(0)">
<li>Name:{{emp.name}}</li>
<li>Age:{{emp.age}}</li>
<li>Salary:{{emp.amount | currency}}</li>
</ul>
<ul ng-repeat="emp in fin.employees" ng-show="fin.showDiv(1)">
<li>Employee Name:{{emp.name}}</li>
<li>Employee Age:{{emp.age}}</li>
<li>Employee Salary:{{emp.amount | currency}}</li>
</ul>
</body>
</html>
App.js
var app=angular.module("Fino",[]);
app.controller("FinController",function(){
var show=false;
this.employees=totalemp;
this.showDiv=function(param){
if(param===1)
{
show=true;
}
return show;
};
});
var totalemp=[
{
name:"abc",age:"20",amount:"120"
},
{
name:"pqr",age:"30",amount:"130"
},
{
name:"xyz",age:"40",amount:"140"
}
]
输出:
我是 Angular js 的初学者。我不确定为什么我的第一个 div 出现在输出中。
最佳答案
这是因为您在两者中都引用了相同的变量show。变量 show 对于两个 Controller 都是通用的，因此当第二个循环运行时，该值会发生变化。所以它显示了两个 div
必须是:
this.showDiv=function(param){
if(param===1)
{
return true;
}
return false;
};
编辑:
<强> DEMO
关于AngularJS:ng-show，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29741573/