Question

我有两个下降。一个是显示部门和其他部门，以显示部门变更的部分。

<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

简单地将一种方法放在部门的ng-change中，如：

 <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='';
}

在级联DropDown更改时重置模型值

2 个答案: