Question

我正在尝试使用服务值绑定几个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都是隐藏的，无论它是真还是假。

Answer 1

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

//对于show为true而对于hide

为false

Answer 2

您可以直接在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>

并确保表达式的值应为true或false boolean not string

ng-show不使用布尔值

2 个答案: