Question

我的HTML视图（耦合到AngularJS控制器）未根据控制器中@ $ scope .___值的变化按预期更新。

应该发生什么：

用户从下拉菜单中选择一个类别。
在其下方，会出现一个项目下拉菜单，显示所选类别中的项目。
如果用户更改了第一个菜单中的类别，则“项目”菜单选项将更改为仅显示新选择的类别中的项目。

实际发生的事情，让我很懊恼：

当用户更改“类别”时，不会重新填充“项目”下拉菜单，而是将新类别中的项目附加到下拉菜单中的可用项目。因此，如果用户更改类别5次，则项目列表确实会变长，并且包括来自所有5个类别的项目。

我不明白。

这是我的相关HTML：

<select
    ng-model='predicate.categoryId'
    <!-- The important line -->
    ng-change='controller.populateItemsByCategory()'
    ng-options="category.id as category.name for category in categories | orderBy:'name'">
</select>
<select
    ng-model='predicate.itemId'
    ng-change='controller.itemSelected()'
    ng-options="item.id as item.name for item in categoryItems track by item.id">
</select>

我的相关CoffeeScript + Lodash，位于我的Controller实例中：

@$scope.categoryItems = [] 

populateItemsByCategory: =>

  // Make sure scope.categoryItems is EMPTY...
  // but the items are still showing in the select dropdown in the view. :-S
  @$scope.categoryItems.length = 0

  // Logging it gives me an empty array, which is good.
  console.log(@$scope.categoryItems)

  // We make our call to the back end (via an internal Rails API)...
  @Items.index
    category_id: @$scope.predicate.categoryId
  .$promise
  .then (items) =>
    @$scope.categoryItems = items

    // This log gives me the correct array of items, as expected.
    // But it's not reflected in the View.  What gives?
    console.log(@$scope.categoryItems)

选择下拉值继续增长而不是被替换（通过AngularJS控制器）

0 个答案: