用Angularjs隐藏任何html元素

Hide any html element with Angularjs

本文关键字：html 元素 任何 隐藏 Angularjs      更新时间：2023-09-26

对于控制器，我尝试隐藏任何被点击的html元素，像这样的函数调用:

<div class="well">
     <h4><span class="label label-primary" ng-click="hideThis($event)" id="tag" hidden></span></h4>
     <h4><span class="label label-default" ng-click="hideThis($event)" id="tag2" hidden></span></h4>
</div>

和这个脚本应该做的工作

var App = angular.module('App', []);
App.controller('appCtrl', function($scope) {
    $scope.hideThis = function($event) {
       $event.target.hide=true;
       //Code I've tried:
       // $event.target.hide();
       // $event.target.hide(true);
    };
});

也许我没有正确使用$event.target.etc属性?

ng-if将从DOM中删除该元素;Ng-hide将元素从显示中隐藏。

其他两个答案已经有了要点，但没有详细说明为什么建议其他选项。它们也没有包含如何将这些指令与你想要在点击时发生的事情联系起来。

从总结开始:

  • 在ng-click 你的应用程序应该改变$scope。
  • On $scope changes Angular应该改变DOM元素的可见性。

让我重复一遍:你的应用应该更新模型(例如$scope)，而不是DOM本身。让后者由Angular来处理。

要添加更多细节…

AngularJS是一个为你处理"数据绑定"的框架，这意味着它将(也应该)负责保持你的模型(例如$scope)和视图(标记)同步。您通常不应该干预此行为，除非有非常具体的原因需要这样做。在这个答案中可以找到关于这个和相关主题的相当长但有趣的阅读(顺便说一下，这个答案是关于什么时候可以自己使用jQuery的问题的回答)。

长话短说:不要在你的控制器/范围内更新DOM 。

代替:声明式地工作。确保你的控制器和作用域拥有基础视图决策所需的所有信息(例如:"show"vs"hide")。此外，确保根据作用域的情况告诉视图何时显示/隐藏。

为了完整起见，让我以重复@JohnManko的建议作为结束，其中的示例还展示了如何处理ng-click来更改底层属性。

第一个是使用ng-if: 

var App = angular.module('App', []);
App.controller('appCtrl', function($scope) {
  $scope.isTagOneActive = true;
  $scope.isTagTwoActive = true;
  $scope.hideTag1 = function() { $scope.isTagOneActive = false; }
  $scope.hideTag2 = function() { $scope.isTagTwoActive = false; }
});
h4:hover { cursor: pointer; background-color: pink; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<div ng-app="App" ng-controller="appCtrl">
    <h4 ng-if="isTagOneActive" ng-click="hideTag1()" id="tag">Tag One!</h4>
    <h4 ng-if="isTagTwoActive" ng-click="hideTag2()" id="tag">Tag Two!</h4>
</div>

从DOM中完全添加/删除元素。

让AngularJS切换可见性，使用ng-show和/或ng-hide:

var App = angular.module('App', []);
App.controller('appCtrl', function($scope) {
  $scope.isTagOneActive = true;
  $scope.isTagTwoActive = true;
  $scope.hideTag1 = function() { $scope.isTagOneActive = false; }
  $scope.hideTag2 = function() { $scope.isTagTwoActive = false; }
});
h4:hover { cursor: pointer; background-color: pink; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<div ng-app="App" ng-controller="appCtrl">
    <h4 ng-show="isTagOneActive" ng-click="hideTag1()" id="tag">Tag One!</h4>
    <h4 ng-hide="!isTagTwoActive" ng-click="hideTag2()" id="tag">Tag Two!</h4>
</div>

可以更容易做到

 <span class="label label-default" ng-show="showTag2=!showTag2"  id="tag2" />
相关文章：