Javascript 使用Angularjs隐藏任何html元素

使用控制器，我尝试隐藏通过函数调用单击的任何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>

---

也许我没有正确使用

$event.target.etc

属性？

这样做会容易得多

 <span class="label label-default" ng-show="showTag2=!showTag2"  id="tag2" />

---

这件事做起来容易多了

 <span class="label label-default" ng-show="showTag2=!showTag2"  id="tag2" />

---

将从DOM中删除元素；将仅从显示中隐藏该元素。

将从DOM中删除该元素；将仅从显示中隐藏元素。

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

首先总结一下：

• 在

  ng上单击

  您的应用程序应更改

  $scope

• 在

  $scope

  上，角度的更改应该会更改DOM元素的可见性

让我重复一下：您的应用程序应该更新模型（例如，

$scope

），而不是DOM本身。让后者由角度来处理

要添加更多详细信息

AngularJS是一个为您处理“数据绑定”的框架，这意味着它将（并且应该）负责保持您的模型（例如

$scope

）和视图（标记）同步。你通常不应该干涉这种行为，除非有非常具体的理由这样做。关于这个主题和相关主题的一篇相当长但有趣的文章可以在中找到（顺便提一下，这篇文章回答了一个关于何时可以自己使用jQuery的问题）

长话短说：不要更新控制器/范围内的DOM

相反：以声明的方式工作。确保您的控制器和作用域拥有视图决策所需的所有信息（例如“显示”与“隐藏”）。此外，确保根据范围情况告知视图何时显示/隐藏

为了完整性起见，让我以重复结束，其中的示例还显示了如何处理更改基础属性

第一种是使用：

var-App=angular.module（'App'，[]）；
App.controller（'appCtrl'，函数（$scope）{
$scope.istagonactive=true；
$scope.istagtwactive=true；
$scope.hideTag1=function（）{$scope.istagonactive=false；}
$scope.hideTag2=function（）{$scope.istagtwactive=false；}
});
h4:hover{光标：指针；背景色：粉色；}

标记一！
二号！
其他两个答案已经有了要点，但没有详细说明为什么会建议其他选项。它们也不包含如何将这些指令与您希望事情在单击时发生的事实联系起来

首先总结一下：


在
ng上单击
您的应用程序应更改
$scope
在
$scope
上，角度的更改应该会更改DOM元素的可见性

让我重复一下：您的应用程序应该更新模型（例如，
$scope
），而不是DOM本身。让后者由角度来处理

要添加更多详细信息

AngularJS是一个为您处理“数据绑定”的框架，这意味着它将（并且应该）负责保持您的模型（例如
$scope
）和视图（标记）同步。你通常不应该干涉这种行为，除非有非常具体的理由这样做。关于这个主题和相关主题的一篇相当长但有趣的文章可以在中找到（顺便提一下，这篇文章回答了一个关于何时可以自己使用jQuery的问题）

长话短说：不要更新控制器/范围内的DOM

相反：以声明的方式工作。确保您的控制器和作用域拥有视图决策所需的所有信息（例如“显示”与“隐藏”）。此外，确保根据范围情况告知视图何时显示/隐藏

为了完整性起见，让我以重复结束，其中的示例还显示了如何处理更改基础属性

第一种是使用：


var-App=angular.module（'App'，[]）；
App.controller（'appCtrl'，函数（$scope）{
$scope.istagonactive=true；
$scope.istagtwactive=true；
$scope.hideTag1=function（）{$scope.istagonactive=false；}
$scope.hideTag2=function（）{$scope.istagtwactive=false；}
});
h4:hover{光标：指针；背景色：粉色；}

标记一！
二号！
try
ng show/ng hide
或
ng if
你好，我有一个可能会帮助你的答案：如果你需要更具体的东西，请告诉我……这是一个尝试为DOM而不是数据编程的经典示例，你应该避免使用angular。您应该管理数据的可见性（在本示例中您甚至没有显示），而不是DOM元素的可见性。@Ajmajma LeoJavier没有我所需要的那么有用，这些标签将来某个时候将成为过滤器标签，我必须创建许多用户希望看到的过滤器标签（例如，在表搜索中）它们必须出现/消失很多次times@Claies我应该用什么，jquery？试试
ng show/ng hide
或
ng if
嗨，伙计，我有一个答案可以帮助你：如果你需要更具体的东西，请告诉我…这是一个尝试为DOM而不是数据编程的经典示例，你应该避免在gular。您应该管理数据的可见性（在本示例中您甚至没有显示），而不是DOM元素的可见性。@Ajmajma LeoJavier没有我所需要的那么有用，这些标签将来某个时候将成为过滤器标签，我必须创建许多用户希望看到的过滤器标签（例如在表搜索中）它们必须出现/消失很多次times@Claies我应该用什么，jquery？这个例子和你的答案是