Question

以下是我视图中的代码......

<label for="restaurant-type-select" class="control-label">
    Type
</label>
<select class="form-control" id="restaurant-type-select" ng-model="restaurant.type" ng-change="restaurantTypeChanged()">
    <option value="Franchise">Franchise</option>
    <option value="Corporate">Corporate</option>
    <option value="Individual">Individual</option>
</select>
<div ng-if="restaurant.type == 'Franchise' || restaurant.type == 'Corporate'">
    <label for="restaurant-group-select" class="control-label">
        Restaurant Group
    </label>
    <select class="form-control" id="restaurant-group-select" ng-model="restaurant.restaurant_group" ng-options="restaurant_group.name for restaurant_group in restaurant_groups.items track by restaurant_group.id">
    </select>
</div>

这是相关的控制器代码......

$scope.restaurantTypeChanged = function() {
    if ($scope.restaurant.type == "Individual") {
        $scope.restaurant.restaurant_group = {};
    }
    console.log($scope.restaurant.restaurant_group);
};

此代码的目的非常简单。如果restaurant.type是“Individual”，则不应设置restaurant_group。否则，restaurant_group应该是可见的和可选择的。问题是restaurant_group似乎没有停留。

例如......我的起始条件是restaurant.type =“Corporate”和restaurant.restaurant_group = {“id”：1，“name”：“Something”}。两个选择框都正确显示。当我为餐馆类型选择“个人”时，餐厅组选择框消失，控制台记录...

{}

这就是我的期望。但是，当我将餐厅类型更改回“公司”时，餐厅组选择框重新出现，并且已选择“Something”选项。控制台日志立即显示......

{“id”：1，“name”：“Something”}

这不是我所期望的。我希望餐馆小组保持空白对象，直到我再次使用餐厅组选择框进行设置。我显然错过了正在发生的事情。

Answer 1

我预计会发生这种情况，因为restaurant.restaurant_group与restaurant-group-select div中的ng-if="restaurant.type == 'Franchise' || restaurant.type == 'Corporate'"绑定。

因此，当您选择新的餐馆类型时，ng-if将解析为true，restaurant.restaurant_group正在从restaurant-group-select（通常是列表中的顶部）中获取默认值。

Answer 2

你可以为此分享Plnkr吗？

它为我工作。请检查。

Plunkr http://plnkr.co/edit/GUAJHc6n324zNdTTkbqL?p=preview

Answer 3

我认为问题是由于ng-if ..尝试使用ng-show ng-if

Answer 4

谢谢你们。问题最终成为我的Angular代码之外的东西。我们在后端使用REST服务。 Angular代码正在将restaurant_group更改为空对象。然后它正在更新数据并刷新。我希望后端删除restaurant_group，如果它被设置为null或空对象。相反，它只是忽略了那个属性。因此，在刷新后，后端会重新填充范围数据。

很抱歉，如果我浪费你的时间看这个。事实证明，Angular方面的工作正如它应该的那样。

选择中的角度变化导致$ scope变量

4 个答案: