Question

我有一些类似于搜索系统的数据（不同来源的链接列表）：

第一个数据单元 显示详细信息
第二单位数据 显示详情
...

每个数据单元都有id（ orderedNumber ）和一些默认必须隐藏的信息。每个数据单元都有显示此信息的按钮。该按钮调用函数 ShowHide 。我有问题，因为此功能不适用于多个按钮。单击按钮时必须显示有关数据单位的信息（数据是动态确定的）。

HTML：

<div ng-repeat="x in results">
    {{ x.orderNumber + '. ' + x.namePackage + ' ' + x.size + ' Bytes '}} <a href={{x.link}}>Download</a> 
    <input type="button" value="Show detail" ng-click="ShowHide(x.orderNumber)" />
    <div ng-show = "IsVisible[orderedNumber]">response</div>
</div>

的script.js：

    $scope.ShowHide = function (orderedNumber) {
    //This will hide the DIV by default.
    $scope.IsVisible[orderedNumber] = false;
    $scope.ShowHide = function (orderedNumber) {
        //If DIV is visible it will be hidden and vice versa.
        $scope.IsVisible[orderedNumber] = $scope.IsVisible[orderedNumber] ? false : true;
    }
};

如何使用AngularJS创建按钮列表？

Answer 1

只需在var中使用属性，而不是像这样管理数组：

ng-click="ShowHide(x)"

ng-show = "x.visible"

$scope.ShowHide = function (item) {
    item.visible = !item.visible
};

编辑：如果你在Showhide功能中没有更多逻辑，你也可以这样做：

ng-click="x.visible = !x.visible"

如何使用AngularJS创建按钮列表？

1 个答案: