javascript - AngularJS:使用 ng-click 时获取 sibling

Question

我正在处理一个列表(

)，该列表在一个页面上的不同 ng-repeat-iterations 内多次使用。

第一个列表项由 ng-repeat 生成，(第二个)最后一个列表项包含一个跨度，单击该跨度时，应导致最后一个列表项(在页面加载时隐藏)显示

                  <ul ng-repeat="list in lists">
                    <li ng-repeat="item in getItems(a,b)">{{item}} 
                    </li>
                    <li>
                        <span style="cursor:pointer;" ng-click="display_item_form($event)" class="glyphicon glyphicon-plus"></span>
                    </li>
                    <li style="display: none;" class="item-form">
                      content to be shown on 'button' press
                    </li>
                  </ul>

除了传递$event之外，我还尝试传递'this'，但结果总是未定义或异常

    $scope.display_item_form = function($event){
//         alert($(it).parent().siblings('.item-form').attr('type'));//passing this instead of $event: result: undefined
            alert($($event.target).attr('type')); //undefined
//         $(it).parent().parent().children('.item-form').show();
//         $('.item-form').show(); // this works, but i only want .item-form inside the current <ul> to be shown

    }

Answer 1

您可以尝试在最后一个 li 的 ng-if 语句中加载和引用时在 $scope 上创建一个变量。

请注意:ng-if 从 DOM 中删除条件元素。ng-show 将 display: none; 应用于 DOM 中的条件元素。

记住这一点很重要，以防您需要重新初始化可能位于条件元素内的任何子组件。

希望这有帮助! :-)

<ul>
  <li ng-repeat="item in getItems(a,b)">{{item}}</li>
  
  <li>
    <span ng-click="$scope.showContent = true"></span>
  </li>
  
  <li ng-if="$scope.showContent">
    content to be shown on 'button' press
  </li>
</ul>