Question

我专门创建了这个fiddle以解决我的问题。我是ng-repeat某个部分。我有一个在其中实现的切换功能。但是，当我单击按钮时，将触发所有重复项的功能。尽管在点击时使用相同的函数名称，但在使用ng-repeat时仍然可以正常工作。下面是代码。我想我可以在这里使用this运算符。到目前为止我的代码（我为小提琴而不是原作创建了这个代码），

HTML

<div ng-app="app">
    <div ng-controller="CommentController">
        <div ng-repeat="list in lists">
            <button ng-click="showDiv()" class="review">{{lists[$index]}}</button>
            <div ng-show="hiddenDiv">This is the div to be toggled on clicking any of the above button. And they do so as they make use of <i>same function on click.</i>

            </div>
        </div>
    </div>
</div>

控制器

var app = angular.module('app', []);

app.controller('CommentController', function ($scope) {
    $scope.hiddenDiv = true;
    $scope.showDiv = function () {
        $scope.hiddenDiv = !$scope.hiddenDiv;
    };
    $scope.lists = ["one", "two", "three", "four", "five"];
});

Answer 1

如果你需要根据点击的按钮折叠一个特定的重复尝试以下，

将按钮修改为

<button ng-click="hiddenDiv = !hiddenDiv" class="review">{{lists[$index]}}</button>

并从控制器

中删除$scope.showDiv功能

DEMO FIDDLE

<强>描述

如果您使用喜欢，

 <button ng-click="showDiv()" class="review">{{lists[$index]}}</button>

单击按钮时，

将从控制器触发$scope.showDiv功能，并且该功能$scope.hiddenDiv属性将切换，注意$ scope.hiddenDiv 将全部可见控制器，这意味着它对所有控制器范围都是通用的，所以如果你改变它，那么使用该属性的所有其他东西都会改变，

但如果使用

<button ng-click="hiddenDiv = !hiddenDiv" class="review">{{lists[$index]}}</button>

然后，hiddenDiv创建子范围（DOC）后，每次重复都会有ng-repeat属性。因此，对于一个特定的重复，有一个单独的hiddenDiv属性，对于其他人来说，它是不可见的，只有相关的重复才可见。

如果您使用

<button ng-click="myData.hiddenDiv = !myData.hiddenDiv" class="review">{{lists[$index]}}</button>

请注意您使用 myData.hiddenDiv代替hiddenDiv ，在这种情况下，angular将在hiddenDiv子范围内检查myData对象的ng-repeat属性，然后角度实现在子范围内没有名为myData的内容然后它将在父作用域中搜索它，并且在那里存在已实现的属性，并且该属性对于所有重复都是常见的，例如使用showDiv()函数。但如果你使用hiddenDiv而没有那么angular会在ng-repeat子范围内搜索它，并在意识到在子范围内没有hiddenDiv之后创建一个新的子范围变量。

参见Prototypal Inheritance。有一个很好的描述here。

请同时查看this说明

Answer 2

您还可以使用数组而不是单个变量，并在函数调用中传递索引，以便它不会在一个操作中切换每个内容。

<div ng-app="app">
<div ng-controller="CommentController">
    <div ng-repeat="list in lists">
        <button ng-click="showDiv($index)" class="review">{{lists[$index]}}</button>
        <div ng-show="!hiddenDiv[$index]">This is the div to be toggled on clicking any of the above button. And they do so as they make use of <i>same function on click.</i>
        <input type="text" ng-model="textModel[$index]"/>{{textModel[$index]}}
        </div>
    </div>
</div>

控制器

var app = angular.module('app', []);

app.controller('CommentController', function ($scope) {
$scope.hiddenDiv=[];
$scope.textModel=[];
$scope.showDiv = function (index) {
    $scope.hiddenDiv[index] = !$scope.hiddenDiv[index];
    $scope.textModel[index]=null;
};
$scope.lists = ["one", "two", "three", "four", "five"];
});

http://jsfiddle.net/paje007/85vp9zme/6/

通过这种方式，如果你想在函数中执行任何操作，你也可以这样做，就像在小提琴中一样。我在这里清除hide上的文本输入。

Angularjs仅对ng-repeat内的单击按钮应用切换功能

2 个答案: