隐藏/显示与AngularJS的div

我想隐藏/显示与AngularJS的div我已经尝试了很多教程不起作用，我最终从这里选择了以下代码enter link description here但它也不起作用隐藏/显示与AngularJS的div

你能帮我找到问题吗？

PS：我使用的角度1.6.3

<html data-ng-app="crm"> 
<head> 
    <title>Product Form</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    ............ 
    <style type="text/css"> 
    .animate-show-hide.ng-hide { 
    opacity: 0; 
    } 
    .animate-show-hide.ng-hide-add, 
    .animate-show-hide.ng-hide-remove { 
    transition: all linear 0.5s; 
    } 
    .check-element { 
    border: 1px solid black; 
    opacity: 1; 
    padding: 10px; 
    } 
    </style> 

    <script type="text/javascript"> 
    it('should check ngHide', function() { 
    var checkbox = element(by.model('checked')); 
    var checkElem = element(by.css('.check-element')); 
    expect(checkElem.isDisplayed()).toBe(true); 
    checkbox.click(); 
    expect(checkElem.isDisplayed()).toBe(false); 
    }); 
    </script> 
</head> 
<body data-ng-controller="ProductController"> 

    <div class="col-md-8 col-sm-8 col-xs-8" style="position: absolute;top:0;bottom: 0;left: 0;right: 0;margin: auto;"> 

    <div class="panel panel-info spacer"><!-- <button type="button" class="close" data-dismiss="alert">x</button> --> 
    <div class="panel-heading"><input type="checkbox" data-ng-model="checked" aria-label="Toggle ngHide"/><b> Product Form</b></div> 
    <div class="panel-body"> 

    <div class="check-element animate-show-hide" data-ng-hide="checked"> 
    <form class="form-horizontal" name="prodForm" novalidate> 
     <div class="form-group"> 
     ..... 
     </div> 
     .... 
    </form> 
    </div> 
    </div> 
    </div> 
    </div> 

<script type="text/javascript" src="angular/angular.min.js"></script> 
<script type="text/javascript" src="angular/angular-sanitize.min.js"> </script> 
<script type="text/javascript" src="angular/angular-animate.js"></script> 
</body> 
</html>

来源

2017-05-07 MyungHee

为什么不直接使用'document.querySelector（” .form-group“）。style.display ='none';'？ – mike510a

这个问题是你不创造module和controller。创建新文件，并在

(function() { 
    angular.module('crm',[]) 
     .controller('ProductController', ProductController) 

    ProductController.$inject = ['$scope']; 
    function ProductController($scope) { 

    } 
})();

张贴此代码，不要忘记注入到HTML

<script src="script.js"></script>

这里是plnkr

https://plnkr.co/edit/sytU3IMgSpHreVlEDzOR?p=preview

来源

2017-05-07 00:35:14 Akashii

隐藏/显示与AngularJS的div

回答

相关问题