javascript - 在 Angular JS 中切换 ng-repeat 中的图标

Question

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

区域显示正确，单击链接时子区域显示正确。但是，我似乎无法让显示/隐藏对加号和减号起作用，并且当用户单击减号再次折叠列表时，我需要隐藏子区域。

<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 的状态。