3

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

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

这是一个JSBin：

http://jsbin.com/kiwicipabago/1/edit

谢谢你。

4

3 回答 3

8

你可以这样做：

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

于 2014-08-18T18:43:41.283 回答
1

所有示例都在这个js fiddle中，并且更加详细。

另外，请注意不使用 jquery，我强烈建议不要在 AngularJs 代码中使用 jquery。
AngularJs 包括可通过该方法访问的jQuery lite 。angular.element您应该将它用于任何 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');
        }
    };

}]);
于 2015-04-22T10:35:46.060 回答
0

在一点 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/

于 2014-11-25T22:53:33.213 回答