Question

我目前正在与Angular 1.4努力奋斗。由于我来自React世界，我还不知道Angular的所有基本概念。我正在尝试构建一个（我认为）简单的产品过滤UI。如您所见，我目前有3个选择框。两个较高的产品负责按特定的产品属性（尺寸/长宽比和生产类型）过滤产品列表。底部的一个将保存更新的，过滤的项目列表，并在更改两个较高的项目时动态更新。我的问题是，只要我不手动更改产品选择框，我就可以实际过滤。手动更改后，每次过滤都会触发模型更新（我推测），这会导致selectbox为空，因为它无法找到产品。实际应该在更改过滤器时选择新选择器值的第一项。选择框的标记如下所示：＆lt; div class =＆＃34; productDetails-options＆＃34;＆gt; ＆lt; div class =＆＃34; productDetails-optionGroup＆＃34;过滤器中的ng-repeat =＆＃34;（键，过滤器）＆＃34;＆gt; ＆lt; select class =＆＃34; productDetails-optionDropdown＆＃34; ng-options =＆＃34; item as item.name for filter.items＆＃34; NG-模型=＆＃34; currentFilters [键]＆＃34; NG-变化=＆＃34; changeCurrentFilter（）＆＃34;＆GT;＆LT; /选择＆GT; ＆LT; / DIV＆GT; ＆lt; div class =＆＃34; productDetails-optionGroup＆＃34;＆gt; ＆lt; select class =＆＃34; productDetails-optionDropdown＆＃34; ng-options =＆＃34; product.id as product.title for filteredProducts＆＃34; NG-模型=＆＃34; currentProductID＆＃34; NG-变化=＆＃34; changeCurrentProduct（currentProductID）＆＃34;＆GT; ＆LT; /选择＆GT; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT; Controller函数看起来像这样： var getFilteredProducts = function（）{ var products = $ scope.source.items var filteredProducts = {} for（产品中的var键）{ var product =产品[关键] var available = true for（产品.filter中的var filterKey）{ var productFilter = product.filter [filterKey] if（productFilter.indexOf（$ scope.currentFilters [filterKey] .id）=== -1）{ available = false } } 如果可供使用的话） { filteredProducts [key] =产品 } } return filteredProducts } var getCurrentProductFromFirstElement = function（）{ const firstProduct = Object.values（$ scope.filteredProducts）[0] $ scope.currentProductID = firstProduct.id $ scope.currentProduct = firstProduct } $ scope.changeCurrentFilter = function（）{ $ scope.filteredProducts = getFilteredProducts（） getCurrentProductFromFirstElement（） } $ scope.changeCurrentProduct = function（newProductID）{ if（！newProductID）{ var productKeys = Object.keys（$ scope.filteredProducts） var firstItem = $ scope.filteredProducts [productKeys [0]] newProductID = firstItem.id 执行console.log（newProductID） } $ scope.currentProduct = $ scope.filteredProducts [newProductID] $ scope.currentProductID = newProductID } 我非常困惑，在这个问题上花了差不多一整天的时间。也许有人可以帮助我。我想这是一些特殊的Angular案例或概念，因为我从未遇到过React或Vanilla javascript的这类问题。我已经非常感激了。如果我帮助我解决这个问题，我会欠你一杯啤酒。

Answer 1

将id放入动态选择框中，让我知道它是否有效。

<select class="productDetails-optionDropdown" id={{currentFilters[key]}}
           ng-options="item as item.name for item in filter.items"
           ng-model="currentFilters[key]"
           ng-change="changeCurrentFilter()"></select>

基于<select>的产品过滤器的奇怪行为导致空选择框

1 个答案: