AngularJS: of-repeat, of-if & JSON

Question

AngularJS: of-repeat, of-if & JSON

0

У меня возникли проблемы с выяснением того, как использовать ng-repeat и ng-if с JSON. Я хочу, чтобы кластер bar1 отображался в той же строке, что и кластер bar2 если они имеют одинаковое имя.

JSON выглядит так:

{
    "bar1" {
        "name": "bar1"
        "clusters": {
            "1": {
                "name": "Cluster 1"
            }
            ...
        }
    }
    "bar2" {
        "name": "bar2"
        "clusters": {
            ...
        }
    }
}

Прямо сейчас у меня есть ужасное решение, где я вложил ng-repeat для bar2 внутри ng-repeat для bar1. Отображается правильный кластер, но, к сожалению, он все еще генерирует HTML для всех кластеров, которые зацикливаются в bar2. По крайней мере, я не хочу, чтобы этот дополнительный HTML был создан.

угловатый

<div ng-repeat="(bar1clusterKey, bar1clusterValue) in blah.bar1.clusters">
    <div>bar1 content</div>
    <div ng-repeat="(bar2clusterKey, bar2clusterValue) in blah.bar2.clusters">
        <div ng-if="bar1clusterValue.name == bar2clusterValue.name">
            <div>bar2 content on the same line as bar1</div>
        </div>
    </div>
</div>

Есть еще bar1 скопления, чем bar2 кластеров, и bar2 является подмножеством bar1, так что нет никаких уникальных bar2 имен кластера.

У меня есть несколько вопросов: есть ли способ достичь желаемого результата без создания дополнительного HTML с ng-repeat? Я даже использую структуру гнездования звука? Могу ли я позаботиться об этом, воспользовавшись услугой (я еще не написал услугу "Угловая")?

EDIT: Вот Plunk, чтобы показать, о чем я говорю.

UltraSonja 24 авг. 2015, в 20:43

Источник

0

Похоже, вы пытаетесь организовать ваши данные в HTML. Лучшим подходом было бы организовать его в вашем контроллере так, как вам нравится, а затем иметь простой HTML-шаблон для его отображения.
Ben Felda 24 авг. 2015, в 18:20

Теги:

html

angularjs

json

dom

2 ответа

1

Вы можете попробовать угловой filter чтобы избежать ng-if

<div ng-repeat="(bar1clusterKey, bar1clusterValue) in blah.bar1.clusters">
    <div>bar1 content</div>
    <div ng-repeat="bar2 in blah.bar2.clusters| filter: {name: bar2clusterValue.name}">
         <div>bar2 content on the same line as bar1</div>
    </div>
</div>

Pankaj Parkar 24 авг. 2015, в 17:13

0

Я пытался использовать фильтр по крайней мере 7 различными способами, но ни один из них не работал. :(
UltraSonja 24 авг. 2015, в 18:43
0

@UltraSonja не могли бы вы попробовать обновленный.
Pankaj Parkar 24 авг. 2015, в 18:56
0

Я тоже попробовал, не повезло. Может быть, это проблема с моим JSON ... Я не знаю. Если я найду решение, я обязательно опубликую его. Спасибо за идею фильтра. Я продолжу идти по этому пути.
UltraSonja 24 авг. 2015, в 19:24
0

@UltraSonja не могли бы вы создать plunkr .. тогда это было бы здорово для дальнейшего глубокого погружения
Pankaj Parkar 24 авг. 2015, в 19:29
0

Я могу сделать это завтра. Есть более насущная проблема, которую я должен решить сегодня.
UltraSonja 24 авг. 2015, в 19:40
0

Видимо, вы не можете фильтровать объекты в Angular, только массивы. Я получил эту ошибку: Error: [filter:notarray] , которая привела меня к этому github и этой документации .
UltraSonja 24 авг. 2015, в 20:47
0

Я создал Plunk этим утром. Будем экспериментировать весь день. Если вы изучите исходный код HTML, вы увидите, что для каждого кластера bar1 создается 2 кластера bar2, хотя отображается только 1. Я хочу удалить лишний кластер. Существует метод jqLite remove (), но я не уверен, что это то, что я хочу, или как его создать в DOM.
UltraSonja 25 авг. 2015, в 13:58

Показать ещё 5 комментариев

Ещё вопросы

Похоже, вы пытаетесь организовать ваши данные в HTML. Лучшим подходом было бы организовать его в вашем контроллере так, как вам нравится, а затем иметь простой HTML-шаблон для его отображения.
Я пытался использовать фильтр по крайней мере 7 различными способами, но ни один из них не работал. :(
@UltraSonja не могли бы вы попробовать обновленный.
Я тоже попробовал, не повезло. Может быть, это проблема с моим JSON ... Я не знаю. Если я найду решение, я обязательно опубликую его. Спасибо за идею фильтра. Я продолжу идти по этому пути.
@UltraSonja не могли бы вы создать plunkr .. тогда это было бы здорово для дальнейшего глубокого погружения
Я могу сделать это завтра. Есть более насущная проблема, которую я должен решить сегодня.
Видимо, вы не можете фильтровать объекты в Angular, только массивы. Я получил эту ошибку: Error: [filter:notarray] , которая привела меня к этому github и этой документации .
Я создал Plunk этим утром. Будем экспериментировать весь день. Если вы изучите исходный код HTML, вы увидите, что для каждого кластера bar1 создается 2 кластера bar2, хотя отображается только 1. Я хочу удалить лишний кластер. Существует метод jqLite remove (), но я не уверен, что это то, что я хочу, или как его создать в DOM.

UltraSonja · Accepted Answer · 2015-08-25T12-49-00.000Z

Если вы поместите ng-if на тот же элемент, что и ng-repeat, тогда HTML, сгенерированный для всех элементов, которые не соответствуют if будет закомментирован внешностью, что не совсем идеально, но это выполняет свою работу. Возможно, remove() может быть там, где угодно, но мне не повезло с этим.

Заключительный Plunk и ключевой фрагмент HTML:

<div class="flex-container" ng-repeat="(bar2clusterKey, bar2clusterValue) in
blah.bar2.clusters" ng-if="bar1clusterValue.name == bar2clusterValue.name">