如何在angular.js中显示以前单击的div的div

时间:2013-11-07 11:44:13

标签: javascript jquery angularjs

我有像这样的HTML

  <div  class="main" ng-controller="firstcontroller">
       <div class="submain">
           <div class="first" ng-show="display">displayed</div>
           <div class="second" my-directive>click</div>
       </div>
       <div class="submain">
           <div class="first" ng-show="display">displayed</div>
           <div class="second" my-directive>click</div>
       </div>
       <div class="submain">
           <div class="first" ng-show="display">displayed</div>
           <div class="second" my-directive>click</div>
       </div>
 </div>

我有这样的控制器

     app.controller('firstcontroller',function($scope)
     {
         $scope.display=false;

     });

我的指令编码就像这样

 app.directive('myDirective',function(scope, element, attrs)
 {
    return function()
    {
        element.bind('click',function()
       {
             element.prev().show();
            //alert(element.prev().attr('class'));

        //   element.parent().find('.main').append('<div>Some text</div>')
       });


    }

 });

这里最初div将被隐藏,如果div具有类名拳头,则只显示具有类名第二的div。因此,当我们点击单击div时,我们必须只显示该单击div的前一个div .....如何在angular.js中显示前一个单击div的div?

1 个答案:

答案 0 :(得分:2)

我觉得问题是缺少信息。例如。是.submain div是硬编码的,还是由迭代创建的?

如果确实如此,那么该指令就是多余的。将HTML更改为:

<div  class="main" ng-controller="firstcontroller">
   <div class="submain">
       <div class="first" ng-show="display[0]">displayed</div>
       <div class="second" ng-click="display[0] = !display[0]">click</div>
   </div>
   <div class="submain">
       <div class="first" ng-show="display[1]">displayed</div>
       <div class="second" ng-click="display[1] = !display[1]">click</div>
   </div>
   <div class="submain">
       <div class="first" ng-show="display[2]">displayed</div>
       <div class="second" ng-click="display[2] = !display[2]">click</div>
   </div>
</div>

控制器:

 app.controller('firstcontroller',function($scope) {
     $scope.display=[false, false, false];
 });