Надавите серию дивы, когда другой DIV показан

Я пытаюсь сделать это, когда кто-то нажимает на поле:Надавите серию дивы, когда другой DIV показан

enter image description here

Это кажется простым, если я положил серый DIV внутри ng-repeat, когда пользователь нажимает на ящик, будет показан новый div.

<div ng-repeat="friend in friends" ng-click...> 
<div> 
    {{friend}} 
</div> 
<div collapse="expand"> 
    some content 
</div> 
</div>

Но, если я не хочу повторять серый div? (Скажем, это пучок html, который не обязательно повторяться каждым элементом).

Итак, у меня есть this plunker, где серый div находится за пределами ng-repeat.

Есть ли какая-либо возможность делать то, что вы видите на изображении, с чистым CSS или каким-то трюком в угловых или javascript?

Я слышал, что я могу использовать jQuery для ввода html, но, возможно, может существовать более чистый способ.

соображения:

Строка может иметь от одного до n пунктов.

То, что я пытался

Поместите серый DIV с position relative, но это не оттолкнуть другие дивы.

источник

2014-10-01 Coyolero

Может быть сделать эту кучу кода директива является правильным способом? – rhgb

Правильно, но включение его в директиву не будет иметь главной проблемы, это, избегая повторения этой директивы по каждому элементу. – Coyolero

Вам нужно обернуть свой крах в директиву. Директива может вынуть всю часть из DOM и сохранить ее внутри себя. Затем вы можете вызвать его нажатием, и пусть оно будет вставлено в нужное место. Вам нужно зачитать DOM и сделать некоторые вычисления, чтобы они были вставлены в нужное место, но это вполне возможно. –

Прежде всего, ваша задача недостижима, если вы не измените разметку. Результат должен быть таким.

<div class="row"> 
    <div class="col-md-4"> 
    Age 
    </div> 
    <div class="col-md-4"> 
    Age 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-4"> 
    Age 
    </div> 
    <div class="col-md-4"> 
    Age 
    </div> 
</div>

Для этого вам необходимо использовать специальный фильтр. Я взял его отсюда how to split the ng-repeat data with three columns using bootstrap

Поскольку вы используете jQuery, вы можете легко манипулировать элементами сейчас. Вы можете заставить вас свернуть div и добавить его в каждую строку.

Вы модифицированное работать planker здесь http://plnkr.co/edit/WUGDcUsxqRqrrmK4I9Lh?p=preview

источник

2014-10-01 01:39:33

Хм, похоже, это хорошее решение, теперь мне нужно только вычислить, какой последний элемент каждой строки. – Coyolero

Я отредактировал плункер и добавил это тоже. Теперь вы можете видеть треугольную позицию в зависимости от выбранного вами div. –

Надавите серию дивы, когда другой DIV показан

ответ

Смежные вопросы