AngularJS: визуализировать дочерний li, когда выбран родительский li

Question

AngularJS: визуализировать дочерний li, когда выбран родительский li

0

У меня есть требование, когда мне нужно отображать только дочерний элемент выбранного li. Ex. На изображении, показанном ниже, проверяется EIS_ASCP_FORECAST_SETS_V, поэтому отображается дочерний объект FND_USER и MRP_FORECAST_DESIGNATORS_V, а остальные элементы скрыты. Аналогично, когда выбран FND_USER, он должен быть показан. Дерево создается с помощью jquery и является динамическим. Я использую AngularJS для остальной части страницы.

Я попытался использовать $(event.target).parent().find('li') но не смог извлечь из него дочерний элемент.

Код для формирования дерева

<li class="treeView">
<a ng-click="getViewColumns('EIS_ASCP_FORECAST_SETS_V', '724')" href=""><b>EIS_ASCP_FORECAST_SETS_V</b></a>&nbsp;<input type="checkbox" ng-checked="true" ng-click="useInSelect('EIS_ASCP_FORECAST_SETS_V')">
    <ul>
        <li><a ng-click="getViewColumns('FND_USER', '724')" href="">FND_USER</a>&nbsp;<input type="checkbox" ng-click="useInSelect('FND_USER')">
        <li><a ng-click="getViewColumns('MRP_FORECAST_DESIGNATORS_V', '724')" href="">MRP_FORECAST_DESIGNATORS_V</a>&nbsp;<input type="checkbox" ng-click="useInSelect('MRP_FORECAST_DESIGNATORS_V')"></a>
    </ul>

Sukesh Kotian 02 нояб. 2015, в 08:39

Источник

0

Покажите некоторые усилия, что вы уже пробовали.
Suresh Kamrushi 02 нояб. 2015, в 07:06
0

@SureshKamrushi Я не понял, как начать.
Sukesh Kotian 02 нояб. 2015, в 07:08
0

@Sukesh, просто посмотри директиву ng-repeat и ng-if
Grundy 02 нояб. 2015, в 07:10
1

Мы можем помочь вам сделать дубляж. Мы не можем написать полный код для вас.
Suresh Kamrushi 02 нояб. 2015, в 07:10
0

@ Гранди, я не использовал AngularJS для написания кода дерева
Sukesh Kotian 02 нояб. 2015, в 07:12
0

@Sukesh, так почему вы добавляете тег angularjs ? Можете ли вы предоставить пример кода, который вы уже используете? Почему бы просто не использовать angularjs для дерева? :-)
Grundy 02 нояб. 2015, в 07:13
0

@Sukesh, добавь код в свой пост вместо комментария
Grundy 02 нояб. 2015, в 07:15
0

@ Гранди недавно я добавил флажок в дерево
Sukesh Kotian 02 нояб. 2015, в 07:15
0

@Sukesh, можешь ли ты предоставить работающему plunkr свой код? Теперь не понятно, что вы имеете в виду, когда говорите динамическое дерево .
Grundy 02 нояб. 2015, в 07:34
0

@ Гранди, решение, которое предоставил Ниши, работает. Я также удалил вызов функции, как вы предложили.
Sukesh Kotian 02 нояб. 2015, в 07:37

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

Теги:

javascript

jquery

angularjs

1 ответ

Ещё вопросы

Покажите некоторые усилия, что вы уже пробовали.
@Sukesh, просто посмотри директиву ng-repeat и ng-if
Мы можем помочь вам сделать дубляж. Мы не можем написать полный код для вас.
@ Гранди, я не использовал AngularJS для написания кода дерева
@Sukesh, так почему вы добавляете тег angularjs ? Можете ли вы предоставить пример кода, который вы уже используете? Почему бы просто не использовать angularjs для дерева? :-)
@Sukesh, добавь код в свой пост вместо комментария
@ Гранди недавно я добавил флажок в дерево
@Sukesh, можешь ли ты предоставить работающему plunkr свой код? Теперь не понятно, что вы имеете в виду, когда говорите динамическое дерево .
@ Гранди, решение, которое предоставил Ниши, работает. Я также удалил вызов функции, как вы предложили.

Nishi · Accepted Answer · 2015-11-02T05-03-00.000Z

вы можете добавить ng-if="showHideComp(parentId)" дочернему элементу. и внутри функции showHideComp() проверяет свойство isSelected parentId и соответственно возвращает true/false.

пример:

<input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/>

Показывать при проверке:

<span ng-if="checked" class="animate-if">
   This is removed when the checkbox is unchecked.
</span>

использование функции view не подходит для angular, потому что она вызывается в каждом цикле дайджеста, почему бы просто не проверить свойство isSelected для parentId без функции?
@Nishi спасибо за предложение, проверим и сообщу
@ Ниши, ваше решение отлично работает. Но как мне изменить его для дерева, которое генерируется динамически? Я имею в виду, я не могу использовать ng-model = "checked" для всех элементов списка, верно?
создать динамический идентификатор и проверить это в ng-if
@Sukesh: вы можете попробовать и с ng-моделью, потому что для всех динамических полей модель будет отдельной.