Сбросить значение модели при каскадном изменении DropDown

Question

У меня есть два drop downs. Один, чтобы показать отделы и другие, чтобы показать разделы об изменении отдела.

<div class="row" ng-controller="cascaded as cas"> 
<div class="form-group"> 
    <label for="select-department" class="control-label col-md-2">Department</label> 
    <div class="col-md-4"> 
     <select id="select-department" class="form-control" name="department" ng-model="myModel.department" 
       ng-options="option.name for option in departments track by option.id"> 
      <option value=""></option> 
     </select> 
    </div> 

     <label for="select-department" class="control-label col-md-2">Section</label> 
     <div class="col-md-4"> 
      <select id="select-section" class="form-control" name="section" ng-model="myModel.section" 
        ng-options="option.name for option in sections track by option.id"> 
       <option value=""></option> 
      </select> 
      {{myModel.section}} 
     </div> 
    </div> 
</div> 

Это прекрасно работает для меня. Если я меняю отдел, вся соответствующая секция обновляется, и если я выбираю любой раздел, соответствующий раздел также присваивается модели. Но проблема в том, что если во второй раз я изменю значение моего отдела, выпадающий раздел будет обновлен, значение модели не будет сброшено до пустого. Он по-прежнему показывает последнее выбранное значение.

var app = angular.module("mainApp", []); 

angular.module("mainApp").controller("cascaded", function ($scope, $filter) { 

    $scope.departments = [ 
    { 
     id: 1, name: "Dep A" 
    }, { 
     id: 2, name: "Dep B" 
    }, { 
     id: 3, name: "Dep C" 
    }]; 

    var sections = [ 
    { 
     id: 1, name: "Sec A", parentId: 1 
    }, { 
     id: 2, name: "Sec B", parentId: 2 
    }, { 
     id: 3, name: "Sec C", parentId: 3 
    }]; 

    $scope.$watch("myModel.department", function (newVal) { 
     if (newVal) { 
      $scope.sections = $filter("filter")(sections, { parentId: newVal.id }); 
     } 

    }); 

}) 

Я хочу сбросить значение моей модели, когда выпадение раздела будет обновлено новыми данными.

Answer 1

Вам необходимо присвоить значение секции вашему mymodel.section значение

$scope.myModel.section= $scope.sections; 

Поскольку $scope.myModel.section это не обновляется, когда изменения в отдел,

Ваше мероприятие часы должны быть

$scope.$watch("myModel.department", function (newVal) { 
     if (newVal) { 
      $scope.sections = $filter("filter")(sections, { parentId: newVal.id }); 
      **$scope.myModel.section= $scope.sections;** 
     } 

    }); 

Fiddler Demo

Answer 2

Проще говоря один метод в нг-смены отдела, как:

<select id="select-department" class="form-control" name="department" ng-model="myModel.department" 
       ng-options="option.name for option in departments track by option.id" ng-change="setBlank()"> 
      <option value=""></option> 
     </select> 

И в методе setBlank() набор myModel.section к пустым, как это:

$scope.setBlank=function(){ 
    $scope.myModel.section=''; 
}