AngularJS：ng-show / ng-hide
我试图用AngularJS提供的ng-show和ng-hide函数显示/隐藏一些HTML。
根据文件，这些function的相应用法如下：
ngHide – {expression} – 如果expression式真的那么元素将分别显示或隐藏。 ngShow – {expression式} – 如果expression式为真，则分别显示或隐藏该元素。
这适用于下面的用例：
<p ng-hide="true">I'm hidden</p> <p ng-show="true">I'm shown</p>
但是，如果我们使用一个对象的参数作为expression式，那么ng-hide和ng-show被赋予正确的true / false值，但是这些值不会被视为布尔值，所以总是返回false ：
资源
<p ng-hide="{{foo.bar}}">I could be shown, or I could be hidden</p> <p ng-show="{{foo.bar}}">I could be shown, or I could be hidden</p>
结果
<p ng-hide="true">I should be hidden but I'm actually shown</p> <p ng-show="true">I should be shown but I'm actually hidden</p>
这是一个错误，或者我没有正确地做到这一点。
我找不到关于引用对象参数作为expression式的任何相关信息，所以我希望任何对AngularJS有更好理解的人都能帮助我。
foo.bar引用不应包含大括号：
<p ng-hide="foo.bar">I could be shown, or I could be hidden</p> <p ng-show="foo.bar">I could be shown, or I could be hidden</p>
Angular expression式需要位于大括号绑定中，而Angular 指令则不需要。
另请参阅了解angular模板 。
当使用angular指令与ng-model进行绑定时，不能使用{{}} ，而对于绑定非angular度属性，则必须使用{{}} 。
例如：
ng-show="my-model" title = "{{my-model}}"
尝试用以下方式包装expression式
$scope.$apply(function() { $scope.foo.bar=true; })
由于ng-show是一个angular度属性，我认为，我们不需要把评价花括号（ {{}} ）。
对于class属性，我们需要用评估花括号（ {{}} ）封装variables。
<script src="1.2.0-rc.2/angular.js"></script> <script type="text/javascript"> function controller($scope) { $scope.data = { show: true, hide: false }; } </script> <div ng-controller="controller"> <div ng-show="data.show"> If true the show otherwise hide. </div> <div ng-hide="!(data.hide)"> If true the show otherwise hide.</div> </div>
如果您想根据一个{{expression式}}的状态显示/隐藏元素，您可以使用ng-switch ：
<p ng-switch="foo.bar">I could be shown, or I could be hidden</p>
该段落将在foo.bar为真时显示，当为false时隐藏。
删除foo.bar周围的{{}}大括号，因为angularexpression式不能用于angular度指令。
更多： https ： //docs.angularjs.org/api/ng/directive/ngShow
例
<body ng-app="changeExample"> <div ng-controller="ExampleController"> <p ng-show="foo.bar">I could be shown, or I could be hidden</p> <p ng-hide="foo.bar">I could be shown, or I could be hidden</p> </div> </body> <script> angular.module('changeExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.foo ={}; $scope.foo.bar = true; }]); </script>
