Angularjs 如何为每个手风琴以不同的角度显示数据

Angularjs 如何为每个手风琴以不同的角度显示数据,angularjs,Angularjs,我用的是有角度的手风琴。它将根据(ng重复)中的对象大小显示手风琴。当我单击Accordion标题时,它应该进行api调用,并将结果存储在变量(部门详细信息)中,它应该显示在Accordion的展开窗口中 当我单击第一个Accordion时,它正在进行API调用并在Accordion窗口中正确显示数据。但是,当我单击第二个Accordion时,它正在进行api调用,现在两个Accordion(第一个和第二个)中的数据都相同,因为department details变量具有第二个Accordion

我用的是有角度的手风琴。它将根据(ng重复)中的对象大小显示手风琴。当我单击Accordion标题时,它应该进行api调用,并将结果存储在变量(部门详细信息)中,它应该显示在Accordion的展开窗口中

当我单击第一个Accordion时,它正在进行API调用并在Accordion窗口中正确显示数据。但是,当我单击第二个Accordion时,它正在进行api调用,现在两个Accordion(第一个和第二个)中的数据都相同,因为department details变量具有第二个Accordion api调用的结果

如何显示每个手风琴独有的数据?。我应该在控制器本身中进行所有api调用,将结果存储在数组中,并在html中使用它,而不是仅在单击Accordion标题时进行api调用。提前谢谢

HTML:


您的问题是,Ctrl.departmentdetails是一个字符串值,在ng repeat的每个部分中使用。您当前的设计只是更新一个重复多次的变量的值。Ctrl.departmentdetails与ng repeat无关,这是您的问题。现在,同一个字符串被绑定到视图中的许多地方,当您执行getinfo()时,您只需更新该字符串,然后该字符串将在html中显示的任何地方更新它

getinfo(item)函数应该将item对象而不仅仅是id作为参数,然后它将在传递给它的item对象上设置departmentdetails。这将允许每个项目都有自己的departmentdetails数据

在发出api请求时,需要使getinfo()向item对象添加departmentdetails属性,或者将其粘贴到另一个数组中,以用作视图的数据源

并将您的html更改为类似这样的内容,或引用用户展开每个部分时收集的departmentdetails数据数组的内容

<accordion close-others="false">
<accordion-group is-open="isopen" ng-repeat="item in object">
    <accordion-heading">
        <span ng-click="Ctrl.getinfo(item)">
            {{item.label}}
        </span>
    </accordion-heading>
    <div> 
        {{item.departmentdetails}}
    </div>
 </accordion-group>


我们可以看一下Ctrl.getinfo(item.id)的声明吗?谢谢@Ekill,实际上数据显示正确。但当我单击second accordion时,它正在进行api调用,现在departmentdetails属性具有second accordion结果。现在,即使在第一个accordion中,它也显示了第二个accordion结果,因为我对每个api调用都使用departmentsdetails属性。您的模板有一个作用域变量,它有一个字符串值,您要将该值放入ng repeat中所有内容的accordion主体中。您需要在模板中使用item.departmentdetails。这说明了吗@maheshyour模板有一个作用域变量,该变量包含一个字符串值,您要将该字符串值放入ng repeat中所有内容的accordion主体中。您需要在模板中使用item.departmentdetails。您提供的函数确实使它看起来像是在数组中的项上正确设置了此属性,但您的模板没有引用该属性。这有用吗@谢谢@Ekill。departmentdetails包含我单击{{item.label}时api调用的结果。对象是我正在使用的数组。ng repeat没有问题。@mahesh departmentdetails是一个字符串变量,您在一个视图中使用它,该视图会被重复多次。相同的字符串值将显示在每个手风琴中,因为这是您告诉它要做的。问题是,在每次重复中,您都引用范围中的一个字符串值。每次调用getinfo函数时,都会更新相同的字符串值。您需要在模板中使用item.departmentdetails,而不是Ctrl.departmentdetails。
public getinfo (departmentid): void {
    this.departmentdetails = null;
    this.services.getdepartmentdetails(departmentid).then((response):any=>{
        this.departmentdetails= response;
    });
}
<accordion close-others="false">
<accordion-group is-open="isopen" ng-repeat="item in object">
    <accordion-heading">
        <span ng-click="Ctrl.getinfo(item)">
            {{item.label}}
        </span>
    </accordion-heading>
    <div> 
        {{item.departmentdetails}}
    </div>
 </accordion-group>