ng-show 不适用于布尔值

ng-show is not working with boolean values

本文关键字:布尔值 适用于 不适用 ng-show      更新时间:2023-09-26

我正在尝试将几个div与服务值绑定"

<body ng-controller="PageConfigurationController">
<label>{{TopLeftPage}}</label><label>{{TopRightPage}}</label>
<label>{{ButtomRightPage}}</label><label>{{ButtomLeftPage}}</label>
<div ng-show="{{TopLeftPage}}"><h1>Div1 </h1></div>
<div ng-show="{{TopRightPage}}"><h1>Div2 </h1></div>
<div ng-show="{{ButtomRightPage}}"><h1>Div3 </h1></div>
<div ng-show="{{ButtomLeftPage}}"><h1>Div4 </h1></div>

标签很好地显示了布尔值,但默认情况下,所有div 都被隐藏,无论它是真的还是假的。

  <div ng-show="TopLeftPage"><h1>Div1 </h1></div>
  <div ng-show="TopRightPage"><h1>Div2 </h1></div>
  <div ng-show="ButtomRightPage"><h1>Div3 </h1></div>
  <div ng-show="ButtomLeftPage"><h1>Div4 </h1></div>

从 ng-show 和 js 中删除大括号

  $scope.TopLeftPage=true;
  $scope.TopRightPage=true;
  $scope.ButtomRightPage=true;
  $scope.ButtomLeftPage=true;   

为真表示显示,假表示隐藏

可以直接在 ng-show 中使用表达式

<div ng-show="TopLeftPage"><h1>Div1 </h1></div>
<div ng-show="TopRightPage"><h1>Div2 </h1></div>
<div ng-show="ButtomRightPage"><h1>Div3 </h1></div>
<div ng-show="ButtomLeftPage"><h1>Div4 </h1></div>

并确保表达式的值应该是真或假布尔值而不是字符串