在 angular js 中切换 ng-repeat 中的图标

Question

在下面的代码中，我试图为一系列区域显示一个加号 [+]。当用户单击加号时，子区域出现在下方并且加号变为减号 [-]。

区域显示正确，单击 link 时子区域显示正确。但是，我似乎无法让 show/hide 为加号和减号工作，并且我需要在用户单击减号再次折叠列表时隐藏子区域。

<div ng-repeat="item1 in vm.Regions track by $index">
    {{item1}}
    <a ng-click="vm.expandIt(item1)">
        <span>[+]</span> 
        <span>[-]</span>
    </a>
    <input type="checkbox" />

    <div ng-if="vm.collapseId==item1" ng-repeat="item2 in vm.data | filter:{'Region':  item1}:true">
        {{item2.CCG}}<input type="checkbox" ng-model="item2.Selected" />
    </div>

</div>

expandIt 函数如下所示：

function expandIt(item) {
  vm.collapseId = item;
  console.log(`expand called!:${vm.collapseId}`)
}

谁能给我指出正确的方向？

Answer 1

你可以这样做：

<a ng-click="vm.expandIt(item1)">
    <span>{{item1.label}}</span> 
</a>

其中 label 根据项目的状态定义为 [+] 或 [-]。

另一种方式可能是：

<a ng-click="vm.expandIt(item1)">
    <span ng-if="!item1.expanded">[+]</span> 
    <span ng-if="item1.expanded">[-]</span>
</a>

其中 expanded 是您的 item1 的状态。

在 angular js 中切换 ng-repeat 中的图标

toggle an icon in ng-repeat in angular js

javascript

icons

toggle

angularjs