AngularJS: of-show

Question

我正在尝试使用 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.I 不确定为什么我的第一个 div 会出现在输出中。

Answer 1

这是因为您在两者中指的是同一个变量 show。变量 show 对于两个控制器都是通用的，因此当第二个循环运行时，值发生了变化。所以它显示了两个 div

必须是：

this.showDiv=function(param){
        if(param===1)
        {
            return true;
        }
        return false;
    };

编辑：

DEMO

Answer 2

这是因为 AngularJS 执行至少两个摘要循环。这意味着您的 showDiv 函数将针对每个 ng-show 指令至少执行两次。

如果 param === 1，您更改值 show（并且永远不会将其改回）。这意味着在第二个摘要周期中变量 show 已经是 true 并且第一个 div 将被显示。

要解决此问题，您可以将变量 show 更改为 false if param === 0（在您的函数内），或者考虑直接返回布尔值 (return param === 1)。我会推荐第二种方法。

AngularJS: of-show

AngularJS: ng-show

angularjs

ng-show