angularjs如何基于模型的条件来显示和隐藏一个div [英] angularjs how to show and hide a div based on model condition

问题描述

我想隐藏/显示基于复选框的div。看来pretty简单。我复选框的值存储在一个模型和股利NG-秀使用它。我在做什么错了？

I want to hide/show a div based on checkbox. Seems pretty simple. I store the value of checkbox in a model and use it in div ng-show. What am I doing wrong?

<div ng-app='visibleApp'>
    <div ng-controller='myController'>
         <input type="checkbox" name="hideBasicInfo" ng-model="hideBasicInfo">hide the basic information section
         <div ng-show="{{!hideBasicInfo}}">
             <label for="firstName">First Name:</label>
             <input type="text" name="firstName" ng-model="firstName"/></br>

             <label for="middleName">Middle Name:</label>
             <input type="text" name="middleName" ng-model="middleName"/></br>
             <label for="lastName">Last Name:</label>
             <input type="text" name="lastName" ng-model="lastName"/>
         </div>
         <hr/>
         <div>
             <h4>Debug Information</h4>
             hideBasicInfo: {{hideBasicInfo}}<br/>
             !hideBasicInfo: {{!hideBasicInfo}}
         </div>
     </div>
</div>

JS文件：

var visibleApp = angular.module('visibleApp',[]);

visibleApp.controller('myController', function($scope){
     $scope.data = "my data";
     $scope.hideBasicInfo = false; 
});

感谢您。

请参阅小提琴

推荐答案

几乎没有...

 <div ng-hide="hideBasicInfo">
    ...
 </div>

没有模板括号（{{}}）需要的。

no template braces ( {{}} ) needed.

这篇关于angularjs如何基于模型的条件来显示和隐藏一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！