Question

我有一个数组，它包含10个对象。我使用ng-repeat循环遍历数组。循环时我有两个条件。当我点击按钮时，我需要显示一些数据，当我点击按钮时我需要隐藏数据。但它没有用。

HTML：

<div ng-repeat="item in items">          
    <div ng-click="showData()"></div>
    <div ng-show="isShowingData">
        <span>{{item.name}}</span>
    </div>
    <div ng-hide="isHidingingData">
        <span>{{item.id}}</span>
    </div> 
</div>

控制器：

$scope.isShowingData = false;
$scope.isHidingingData = true;

$scope.showMoreAttr=function() { 

    if ($scope.isShowingData == true) {
        $scope.isShowingData = false;
        $scope.isHidingingData = true;
    } else if($scope.isShowingData == false) {
        $scope.isShowingData=true;
        $scope.isHidingingData=false;
    }
};

现在按钮将打印10次。当我单击show按钮时，它将显示所有对象，当我单击hide时，它将隐藏所有对象。

请问您如何避免这个问题并解决单个对象？

Answer 1

将您的项目作为参数传递给该函数。
使用item.isShowingData和item.isHidingData
在html绑定到item.isShowingData和item.isHidingData

结果应该是单次切换。

Answer 2

您需要存储每个项目的状态，而不是在范围级别，或者它将应用于所有项目。这是你如何做到的。

更新模板以传递项目并使用相同的变量名称，但作为ng-show和ng-hide的项目属性。

<div ng-repeat="item in items">          
    <div ng-click="showData(item)">Click</div>
    <div ng-show="item.isShowingData">
        <span>{{item.name}}</span>
    </div>
    <div ng-hide="item.isHidingingData">
        <span>{{item.id}}</span>
    </div> 
</div>

然后更新您的控制器以使用item，您只需使用else代替else if：

$scope.showData = function(item) { 

    if (item.isShowingData) {
        item.isShowingData = false;
        item.isHidingingData = true;
    } else {
        item.isShowingData = true;
        item.isHidingingData = false;
    }
};

你甚至可以通过只有一个属性来进一步简化

模板

<div ng-repeat="item in items">          
    <div ng-click="showData(item)">Click</div>
    <div ng-show="item.isShowingData">
        <span>{{item.name}}</span>
    </div>
    <div ng-hide="item.isShowingData">
        <span>{{item.id}}</span>
    </div> 
</div>

控制器

$scope.showData = function(item) { 
    item.isShowingData = !item.isShowingData;
};

Answer 3

您必须将其存储在您的项目中。否则您的按钮将影响每个项目。我也使用一个布尔值而不是两个布尔值。你不需要一个布尔值用于隐藏，另一个用于show。无论如何，一个是另一个的反面。它大大简化了控制器。

Html：

<div ng-repeat="item in items">          
    <div ng-click="showData(item)"></div>
    <div ng-show="item.isShowingData">
        <span>{{item.name}}</span>
    </div>
    <div ng-show="!item.isShowingData">
        <span>{{item.id}}</span>
    </div> 
</div>

控制器：

$scope.showData=function(item) {     
   item.isShowingData = !item.isShowingData;
};

点击功能不按照ng-repeat中的预期工作

3 个答案: