Question

我有一个div并且在正常情况下显示：块css应用于它。并且隐藏按钮是为了在点击该按钮时隐藏div。但是jquery＆＃39; s

$('#divid').css()

无法覆盖css propoerty.Here是一个例子。 jsfiddle

<div ng-controller="MyController">
   <div id="div1" class="showdiv">This is the div need to hide on click
   <a href='#' ng-click="hidedivfn()">Hide</a>
   </div>
   </div>
</div>

function MyController($scope) {
  $scope.hidedivfn=function(){
  $('#div1').css({ 'display': "none!important" });
  }

}

.showdiv{
  display:block;
}

Answer 1

不要在angularjs控制器中使用jquery。不要在锚点中使用哈希。它会尝试导航。使用按钮。请阅读更多基础知识。尝试以下，

  <div ng-controller="MyController">
       <div id="div1" ng-if="div.show">This is the div need to hide on click
       <a ng-click="hidedivfn()">Hide</a>
       </div>
       </div>
    </div>

    function MyController($scope) {
$scope.div={show:true};
      $scope.hidedivfn=function(){
      $scope.div.show=false;
      }

    }

Answer 2

隐藏div（或任何元素）使用$('#div1').hide() 并显示div（或任何元素）使用$('#div1').show()

Answer 3

您可以将ng-hide用于此目的，请查看下面的代码段。

var app = angular.module("myApp",[]);

app.controller("MyController" , function($scope){
  $scope.hideDiv = false;
  
  $scope.hidedivfn = function(){
    $scope.hideDiv = true;
  }
  
   $scope.showdivfn = function(){
    $scope.hideDiv = false;
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
   <div id="div1" ng-hide="hideDiv">This is the div need to hide on click
   
   </div>
  
  <a href='#' ng-click="hidedivfn()">Hide</a>
   <a href='#' ng-click="showdivfn()">show</a>
   </div>
</div>

Answer 4

在你的情况下，你不必覆盖，但你可以用角度方式实现它

ng-Show
ng-if
ng-hide
ng-class

但在上述内容中，您可以使用ng-show

<div id="div1" ng-show="stat">This is the div need to hide on click
<a ng-click="hidedivfn()">Hide</a>


$scope.stat = true;
function hidedivfn(){
    if($scope.stat == true){
        $scope.stat = false;
    }else{
        $scope.stat = true;
    }
}

ng-show here的文档。

此致

无法使用jquery覆盖css属性

4 个答案: