Question

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

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

这是一个JSBin：

谢谢。

Answer 1

你可以这样做：

<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>

Answer 2

所有示例都在此js fiddle中，并且稍微详细一些。

另外，请注意 jquery未使用，我非常建议不要在AngularJs代码中使用jquery 。
AngularJs包含angular.element方法可访问的jQuery lite。您应该将它用于任何dom操作，如果它没有为您提供足够的功能，那么请考虑创建一个指令。

请查看此控制器以获取更多信息：

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

    $scope.show_me = function (event) {
        var box = event.target.parentElement;
        var article = angular.element(box).find('article');
        var articles = angular.element(box.parentElement).find('article');
        // if already shown, hide it
        if (article.hasClass('show'))
            article.removeClass('show')
        else // elsif not shown, hide all and show it
        {
            articles.removeClass('show');
            article.addClass('show');
        }
    };

}]);

Answer 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> ...

如果您想默认隐藏p元素，可以添加一点CSS：

.box p { display: none; }

JSBin：http://jsbin.com/fegevoyoda/2/

AngularJS ng-显示具有多个元素的一个条件

3 个答案: