Angularjs 仅将切换功能应用于 ng-repeat 中单击的按钮

Question

我创建此 fiddle 专门用于解决我的问题。我正在 ng-repeat 访问某个部分。我有一个要在其中实现的切换功能。但是，当我单击按钮时，所有重复项目都会触发功能。尽管在单击时使用相同的函数名称，但在不使用 ng-repeat 时效果很好。下面是代码。我想我可以在这里使用类似于 this 运算符的东西。到目前为止我的代码（我为 fiddle 而不是原始代码创建了这个），

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 属性，因为 ng-repeat 正在创建一个子作用域 (DOC)。所以对于一个特定的重复有一个单独的 hiddenDiv 属性并且它对其他人不可见它只对相关的重复可见。

如果你使用

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

请注意，您使用 myData.hiddenDiv 而不是 hiddenDiv，在这种情况下，angular 将检查 ng-repeat 子范围内的 myData 对象的 hiddenDiv 属性，然后 angular 意识到没有所谓的 myData 在子作用域中然后它会在父作用域中搜索它并意识到属性存在于那里并且属性对于所有重复都是常见的，比如使用 showDiv() 函数.但是如果你不使用 hiddenDiv 那么 angular 将在 ng-repeat 子范围内搜索它并在意识到子范围内缺少 hiddenDiv with 后创建一个新的子范围变量.

参见原型继承。有一个很好的描述 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/

这样，如果您想在函数中执行任何操作，您也可以像在 fiddle 中那样执行。这里我清除隐藏的文本输入。

Angularjs 仅将切换功能应用于 ng-repeat 中单击的按钮

Angularjs Apply toggle function to only the clicked button inside ng-repeat

javascript

angularjs

angularjs-ng-repeat

this

togglebutton