如何根据angularjs中的模型条件隐藏和显示div?

前端之家收集整理的这篇文章主要介绍了如何根据angularjs中的模型条件隐藏和显示div?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想基于复选框隐藏/显示div.看起来很简单.我将复选框的值存储在模型中并在div ng-show中使用它.我究竟做错了什么?
<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; 
});

谢谢.

fiddle

差不多了…
<div ng-hide="hideBasicInfo">
    ...
 </div>

不需要模板括号({{}}).

原文链接:https://www.f2er.com/angularjs/142342.html

猜你在找的Angularjs相关文章