Here's the code in my view...
<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>
Here's the relevant controller code...
$scope.restaurantTypeChanged = function() {
if ($scope.restaurant.type == "Individual") {
$scope.restaurant.restaurant_group = {};
}
console.log($scope.restaurant.restaurant_group);
};
The purpose of this code is pretty simple. If the restaurant.type is "Individual" there should be no restaurant_group set. Otherwise, the restaurant_group should be visible and setable. The problem is that the restaurant_group doesn't seem to stay set.
For example... My starting conditions are restaurant.type = "Corporate" and the restaurant.restaurant_group = { "id": 1, "name": "Something" }. both select boxes show this correctly. When I select "Individual" for the restaurant type, the restaurant group select box disappears and the console logs...
{}
This is what I expect. However, when I change the restaurant type back to "Corporate" the restaurant group select box reappears with the "Something" option already selected. The console log immediately displays...
{"id": 1, "name": "Something"}
This is not what I would expect. I would expect the restaurant group to remain an empty object until I set it again with the restaurant group select box. I'm obviously missing something that is going on here.
