Есть блок фильтрации. В нем несколько селектов. При изменении значения в одном из них, должен меняться набор элементов в другом. Например: Меняем марку машины с BMW на KIA - в select с моделями должны подгрузиться новые значения для KIA.
Скриншот:
https://yadi.sk/i/q12cUNCzzgkkF
Функция, которая меняет значение Visible у элементов в зависимом селекте отрабатывает правильно. Но изменения отображаются только если свернуть/развернуть блок фильтрации.. Т.е. новые элементы не появляются в html сразу.
Разметка:
<form name="catalogFilterForm" class="catalog-filter-content cs-br-1" novalidate="novalidate" data-submenu-container="{'type': 'accordion'}">
<div class="catalog-filter-block" data-ng-repeat="item in ::catalogFilter.catalogFilterData track by $index" data-ng-init="indexItem = $index">
<div submenu-parent >
<div class="catalog-filter-block-header cs-l-1 cs-br-1" data-ng-click="submenuParent.submenu.toggle()" data-ng-if="item.Visible">
<span class="catalog-filter-block-title" data-ng-bind="::item.Title"></span>
<span class="catalog-filter-block-subtitle" data-ng-if="item.Subtitle != null" data-ng-bind="::item.Subtitle"></span>
<div data-ng-if="::item.Unit.length> 1" class="catalog-filter-questian-description"> ({{::item.Unit}}) </div>
<div data-ng-if="::item.Description.length> 1" class="catalog-filter-questian-description">
<div class="icon-question-after"
uib-popover="{{::item.Description}}" data-popover-trigger="mouseenter" data-popover-placement="top-left"></div>
</div>
</div>
<div data-submenu data-ng-init="submenu.isSubmenuVisible = item.Expanded">
<div class="catalog-filter-block-content cs-br-1" data-ng-if="submenu.isSubmenuVisible">
<div data-ng-class="catalogfilter.getcssclassforcontent(item.control)">
<div data-ng-if="::item.Control == 'select'">
<span class="select-custom icon-down-open-after-abs cs-t-8">
<select class="cs-bg-2" data-ng-model="item.Selected" data-ng-options="option.Text for option in ::item.Values | filter: {Visible : true}" data-ng-click="e = $event" data-ng-change="catalogFilter.clickSelect(e)">
<option value="" selected>{{ ::'Js.CatalogFilter.NotSelected' | translate }}</option>
</select>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="catalog-filter-footer cs-br-1">
<input type="button" class="btn btn-middle btn-submit" value="{{ ::'Js.CatalogFilter.Apply' | translate }}" data-ng-click="catalogFilter.submit()" />
<input type="button" class="btn btn-middle btn-action" value="{{ ::'Js.CatalogFilter.Reset' | translate }}" data-ng-click="catalogFilter.reset()" />
</div>
</form>
метод, обновляющий свойство Visible у привязанных объектов:
service.changeVisibleFilters = function (filterData)
{
if (filterData == null) {
return null;
}
var arraySelected,
selectedItems = [],
selectedProperties = [],
item,
nameRangeMin, nameRangeMax;
for (var i = filterData.length - 1; i >= 0; i--)
{
item = filterData[i];
//ищем выбранные значения
if (item.Control == 'select' || item.Control == 'selectSearch') {
if (item.Selected != null && item.Selected.Id !== '0') {
selectedItems.push(item.Selected.Id);
selectedProperties.push(item.PropertyId);
}
}
}
for (var i = 0; i< filterData.length; i++)
{
var curFilter = filterData[i];
if (curFilter.ParentPropertyId == null) continue;
if (selectedProperties != null && selectedProperties.length > 0)
{
if (selectedProperties.indexOf(curFilter.ParentPropertyId) >= 0)
{
//Проверяем, не изменилось ли значение родителя
var parentModificed = true;
for (var p = 0; p < selectedItems.length; p++) {
var selectedItem = selectedItems[p];
if (curFilter.Selected != null && curFilter.Selected.ParentPropertyValueIds.indexOf(selectedItem) >= 0) {
parentModificed = false; // Если предок текущего значения выбран на верхнем уровне - не изменилось
break;
}
}
if (parentModificed) {
curFilter.Selected = null;
//curFilter.Expanded = false;
//curFilter.Visible = false;
}
//Перебираем значения для данного фильтра.
var hasValues = false;
for (var j = 0; j < curFilter.Values.length-1; j++)
{
var curFilterValue = curFilter.Values[j];
curFilterValue.Visible = false;
for (var p = 0; p < selectedItems.length; p++) {
var selectedItem = selectedItems[p];
if (curFilterValue.ParentPropertyValueIds.indexOf(selectedItem) >= 0) {
curFilterValue.Visible = true; // Если предок текущего значения выбран на верхнем уровне - показываем
hasValues = true;
break;
}
}
}
if (hasValues) {
curFilter.Visible = true;
curFilter.Expanded = true;
}
}
else
{
curFilter.Visible = false;
curFilter.Expanded = false;
curFilter.Selected = null;
}
}
else
{
curFilter.Visible = false;
curFilter.Expanded = false;
curFilter.Selected = null;
}
}
};