AngularJS:使用 ng-click 时获取兄弟姐妹

Question

我正在处理一个列表(

(，该列表在一个页面上的不同ng重复迭代中多次使用。

第一个列表项由 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-showdisplay: 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>

Answer 2

你可以完全在HTML中做这样的事情。

showItem一开始没有定义，所以它不会显示。单击该按钮后，切换该按钮(在本例中将其设置为 true(，它将显示。

var app = angular.module("app", []);
app.controller("TestCtrl", ['$scope', function ($scope) {

$scope.list = [{ val: 1 },{ val: 2 },{ val: 3 },{ val: 4 },{ val: 5 }];
$scope.list2 = [{ val: 1 },{ val: 2 },{ val: 3 },{ val: 4 },{ val: 5 }];

}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app">
<div data-ng-controller="TestCtrl">
<ul>
<li ng-repeat="item in list">{{item.val}} </li>
<li data-ng-click="showList1Item=!showList1Item"><span style="cursor:pointer;">+</span></li>
<li data-ng-show="showList1Item">last item</li>
</ul>
<ul data-ng-controller="TestCtrl">
<li ng-repeat="item in list2">{{item.val}} </li>
<li data-ng-click="showList2Item=!showList2Item"><span style="cursor:pointer;">+</span></li>
<li data-ng-show="showList2Item">last item</li>
</ul>
</div>
</div>

Answer 3

我找到了一个解决方案：

angular.element((;

$scope.display_item_form = function($evt){
var ele = angular.element($evt.target);
ele.parent().parent().find('.item-form').show();
}