Javascript AngularJS ng用多个元素显示一个条件

我有三个div，带有一个带有“showMe”布尔值的ng click。他们的段落有一个省略“showMe”的ng show

我的问题是，如何使用一个条件在我单击的div上显示段落？换句话说，如果我单击第一个div，我只会看到“1”，“2”和“3”参数应该保持隐藏。ng repeat不是此练习的选项

这是一个JSBin：

谢谢。

您可以这样做：

<div ng-app="app">
<div ng-controller="AppCtrl">
  <div class="box" ng-click="showMe = 1">
    <p ng-show="showMe ==1">1</p>
  </div>
  <div class="box" ng-click="showMe = 2">
    <p ng-show="showMe==2">2</p>
  </div>
  <div class="box" ng-click="showMe = 3">
    <p ng-show="showMe ==3">3</p>
  </div>
</div>

1
2
3

---

在jQuery的帮助下，您可以使用另一个解决方案：

将名为

showMe

的函数添加到控制器：

var app = angular.module("app", []);

  app.controller("AppCtrl", function($scope) {

  $scope.showMe = function(event) {
    $(event.target).find('p').toggle();
  };
});

然后在HTML中，将以下内容更改为：

...
<div ng-controller="AppCtrl">
  <div class="box" ng-click="showMe = !showMe">
    <p ng-show="showMe">1</p>
  </div>
</div>
...

...
<div ng-controller="AppCtrl">
  <div class="box" ng-click="showMe($event)">
    <p>1</p>
  </div>
</div>
...

---

JSBin:

所有的例子都在这里，而且更加详细

另外，请注意，没有使用jquery，我强烈建议不要在AngularJs代码中使用jquery AngularJs包括可通过

angular.element

方法访问的。您应该将它用于任何dom操作，如果它没有为您提供足够的功能，那么请考虑创建一个指令

查看此控制器以了解更多信息：

app.controller（“AppCtrl”、['$scope'，函数（$scope）{
$scope.show_me=函数（事件）{
变量框=event.target.parentElement；
var article=angular.element（box.find（'article'）；
var articles=angular.element（box.parentElement）.find（'article'）；
//如果已显示，请将其隐藏
if（article.hasClass（'show'））
article.removeClass（“显示”）
else//els如果未显示，则隐藏全部并显示
{
articles.removeClass（“show”）；
article.addClass（“show”）；
}
};
}]);

编写您自己的指令来实现您想要的行为，或者，如果您希望它快速而肮脏，请使用三个单独的布尔变量，而不是一个。请不要在angularjs代码中使用jquery。改为使用内置的，或创建一个指令。

.box p {
  display: none;
}