Как по-разному отображать данные в угловых аккордеонах для каждого аккордеона

Question

Как по-разному отображать данные в угловых аккордеонах для каждого аккордеона

0

Я использую угловой аккордеон. Он отобразит аккордеоны на основе размера объекта в (ng-repeat). Когда я нажимаю заголовок Аккордеона, он должен сделать вызов api и сохранить результат в переменной (детали отдела), и он должен отображаться в расширенном окне аккордеона.

Когда я нажимаю первый Аккордеон, он вызывает вызов API и корректно отображает данные в окне Аккордеона. Но, когда я нажимаю второй Аккордеон, он делает api-вызов, и теперь данные в обоих аккордеонах (первый и второй) одинаковы, поскольку переменная детали отдела имеет результат второго вызова api-аккордеона.

Как я могу отображать данные, уникальные для каждого аккордеона?. Должен ли я делать все вызовы api в самих контроллерах, хранить результаты в массиве и использовать его в html вместо вызова api только тогда, когда я нажимаю заголовок Accordion. Заранее спасибо.

HTML:

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

контроллер:

public getinfo (departmentid): void {
    this.departmentdetails = null;
    this.services.getdepartmentdetails(departmentid).then((response):any=>{
        this.departmentdetails= response;
    });
}

mahi244 01 июль 2015, в 21:53

Источник

Теги:

angularjs

1 ответ

Ещё вопросы

ekill · Answer 1 · 2015-07-01T17-38-00.000Z

ваша проблема в том, что Ctrl.departmentdetails - это одно строковое значение, которое вы используете в каждом разделе вашего ng-repeat. ваш текущий проект просто обновляет значение одной переменной, которая повторяется много раз. Ctrl.departmentdetails имеет мало общего с вашим ng-repeat, и это ваша проблема. Прямо сейчас у вас есть такая же строка, связанная со многими местами в вашем представлении, и когда вы делаете getinfo(), вы просто обновляете одну строку, которая затем будет обновлять ее везде, где она появляется в вашем html.

ваша функция getinfo (item) должна взять объект item, а не только идентификатор в качестве аргумента, а затем он установит элементы deldails на объект объекта, который вы передадите ему. это позволит каждому элементу иметь свои собственные данные отдела.

вам нужно сделать getinfo() добавить свойство departmentdetails к вашему объекту объекта, когда вы делаете запрос api, или же привязать его к другому массиву, который можно использовать в качестве источника данных для вашего представления.

и измените свой html на что-то вроде этого или что-то, что относится к массиву данных данных отдела, которые собираются, когда ваш пользователь расширяет каждый раздел.

<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>

Спасибо @Ekill, На самом деле данные отображаются правильно. Но когда я щелкаю по второму аккордеону, он делает вызов API, и теперь свойство Departmentdetails имеет второй результат. Теперь, даже в Первом аккордеоне также он показывает результаты второго аккордеона, потому что я использую свойство департаменты деталей для каждого вызова API.
у вашего шаблона есть одна переменная области видимости, которая имеет строковое значение, которое вы помещаете в тело гармошки всего в вашем ng-repeat. вам нужно использовать item.departmentdetails в вашем шаблоне. это ясно? @mahesh
у вашего шаблона есть одна переменная области видимости, которая имеет строковое значение, которое вы помещаете в тело гармошки всего в вашем ng-repeat. вам нужно использовать item.departmentdetails в вашем шаблоне. Функция, которую вы предоставили, выглядит так, как будто вы правильно устанавливаете этот атрибут для элемента в массиве, но ваш шаблон не ссылается на это свойство. это помогает? @mahesh
Спасибо @Ekill. DepartmentDetails содержит результат вызова API, когда я нажимаю {{item.label}}. Объект - это массив, который я использую. с ng-repeat проблем нет.
@mahesh Departmentdetails - это строковая переменная, которую вы используете внутри представления, которое повторяется много раз. одно и то же строковое значение будет отображаться в каждом из ваших аккордеонов, потому что именно это вы и говорите. проблема в том, что вы обращаетесь к одному единственному строковому значению в своей области действия при каждом повторении. каждый раз, когда вызывается ваша функция getinfo, обновляется одно и то же строковое значение. вам нужно использовать item.departmentdetails в вашем шаблоне, а не Ctrl.departmentdetails.
Я только что загрузил картинку. Не могли бы вы увидеть это?
да, я вижу это это именно так, как я себе представлял. @mahesh
Переменная Departmentdetails привязана к контроллеру. В объекте item не будет свойства с названием Departmentdetails. Прямо сейчас я делаю вызов API только при нажатии item.id. После успешного вызова API я сохраняю результат в переменной департамента.
@mahesh Я снова пересмотрел свой ответ для вас, я надеюсь, что это имеет смысл для вас сейчас, я чувствую, что вы начинаете понимать свою проблему