Question

有这个ng-repeat

<li class="tmmenu-admin-tabs-builder-panel-portlet" ng-repeat="question in questions">
    <div>
        <span class="tmmenu-admin-tabs-builder-panel-portlet-toggler" ng-click="tatbppTogler()">{{{tatbppt}}}</span>
        <span class="tmmenu-admin-tabs-builder-panel-portlet-number">{{question.id}}</span>
        {{question.text}}
    </div>
    <div class="tmmenu-admin-tabs-builder-panel-portlet-options" ng-show="showTatbppo">
        ...
    </div>
</li>

我想要点击“tmmenu-admin-tabs-builder-panel-portlet-toggler”更改可见性“tmmenu-admin-tabs-builder-panel-portlet-options”并更改“tmmenu-admin-中的文本”标签建设者用面板portlet的toggler”。我写这个代码来获得结果：

$scope.tatbppTogler = function(){
        $scope.showTatbppo = !$scope.showTatbppo;
        if($scope.showTatbppo){
            $scope.tatbppt = "-";
        }else{
            $scope.tatbppt = "+";
        }
    }

它有效，但在所有“Li”中改变了dom，如何只更改当前（用户点击的地方）“li”？

Answer 1

你可以这样做：

<li class=portlet" ng-repeat="question in questions">
    <div>
       <span class="toggler" ng-click="showTatbppo=!showTatbppo">{{showTatbppo ? "+" : "-" }}</span>
    <span class="number">{{question.id}}</span>
    {{question.text}}
</div>
<div class="options" ng-show="showTatbppo">
    ...
</div>
</li>

工作小提琴，这个概念： http://jsfiddle.net/x1nguaxj/

顺便说一句。你有非常非常长的css类名：）

Answer 2

您可以为每个问题创建一个属性ID，然后根据您点击的问题的ID进行更改

Answer 3

1路

您可以在ng-click="tatbppTogler(this)"中传递此，然后在功能操作中使用此

2路

你可以创建自定义指令并将其应用到你的li元素然后在这个指令上绑定click to element并listen，并且点击函数将触发你的监听器，你将有权访问这个元素

Answer 4

我建议你看看$index。来自angularjs docs：

重复元素的迭代器偏移量（0..length-1）

使用此功能，您可以清楚地确定单击的特定div。

angularjs如何设置正确的功能范围？

4 个答案:

1路

2路