使用AngularJS重置字段的值

Question

我对AngularJS有疑问。我有3个字段（网站，期间，发布）。我首先点击网站 [01] ，然后会出现期间 [02] 字段。当我点击Period [02] 时，会出现Release [03] 字段。好。但是当我更改网站 [更改] 时，期间和发布字段必须删除已获取的信息（实际上，字段不会更改）。提前感谢您的回复。

view.html

<div class="col-md-4" ng-show="sites.length > 1">
                <label for="siteId">{{'ler.todo.form.site' | translate}}</label>
                <ui-select id="siteId" name="siteId" ng-model="siteId" on-select="onSelected($item)" >
                    <ui-select-match placeholder="Select a site">
                        {{$select.selected.label}}
                    </ui-select-match>
                    <ui-select-choices
                            repeat="value.id as value in sites | filter: {label: $select.search}">
                        {{value.label}}
                    </ui-select-choices>
                </ui-select>
            </div>
            <div class="col-md-4" ng-hide="sites.length > 1 ">
                <button class="btn" >{{sites[0].label}}</button>
            </div>
            <div class="col-md-4" ng-show="periods.length > 1">
                <label for="siteId">{{'ler.todo.form.period' | translate}}</label>
                <ui-select id="period" name="period" ng-model="period" on-select="onSelectedPeriod($item)" >
                    <ui-select-match placeholder="Select a Period">
                        {{$select.selected |  date : "MMM yyyy"}}
                    </ui-select-match>
                    <ui-select-choices
                            repeat="value in periods ">
                        {{value |  date : "MMM yyyy"}}
                    </ui-select-choices>
                </ui-select>

            </div>
            <div class="col-md-4" ng-hide="periods.length > 1 || periods === undefined || periods.length === 0">
                <button  class="btn right margin-btn-top" >{{period |  date : "MMM yyyy"}}</button>
            </div>

            <div class="col-md-4" ng-show="releases.length > 1">
                <label for="siteId">{{'ler.todo.form.release' | translate}}</label>
                <ui-select id="release" name="release" ng-model="release" on-select="onSelectedRelease($item)" >
                    <ui-select-match placeholder="Select a Release">
                        {{$select.selected |  date : "dd/MM/yyyy - hh:mm a"}}
                    </ui-select-match>
                    <ui-select-choices
                            repeat="value in releases">
                        {{value |  date : "dd/MM/yyyy - hh:mm a"}}
                    </ui-select-choices>
                </ui-select>

            </div>
            <div class="col-md-4" ng-hide="releases.length > 1 || releases === undefined || releases.length === 0">
                <button  class="btn right margin-btn-top" >{{release |  date : "dd/MM/yyyy - hh:mm a"}}</button>
            </div>

controller.js

$scope.sites = sites;
$scope.currentTs = null;
$scope.currentReporting = null;
$scope.selectedSiteId = null;
$scope.current = {};
var firstEnter = true;

$scope.onSelected = function (selectedItem) {

    Dao.TechnicalStatus.historyPeriod({'id' : selectedItem.id}).$promise.then(function (periods) {
        // for tabs to be hidden
        $scope.currentTs = null;
        $scope.periods = periods;
        $scope.selectedSiteId = selectedItem.id;
        if(periods.length === 1){
            $scope.period = periods[0];
            $scope.onSelectedPeriod(periods[0]);
        }
    }, function () {
    });
};

$scope.onSelectedPeriod = function (selectedItem) {

    Dao.TechnicalStatus.release({'id' : $scope.selectedSiteId, 'month': selectedItem}).$promise.then(function (releases) {
        // for tabs to be hidden
        $scope.releases = releases;
        $scope.selectedPeriod = selectedItem;
        $scope.currentTs = null;
        if(releases.length === 1){
            $state.go('techStatusHistory', {'siteId': $scope.selectedSiteId, 'period': selectedItem, 'release': releases[0]});
            $scope.releases = releases[0];
            $scope.onSelectedRelease(releases[0]);
        }
    }, function () {

    });
};

$scope.onSelectedRelease = function (selectedItem) {
    $state.go('techStatusHistory', {'siteId': $scope.selectedSiteId, 'period': $scope.selectedPeriod, 'release': selectedItem});
};

Answer 1

将ng-change标签添加到ui-select元素，该元素绑定到一个函数，该函数重置绑定到其他两个视图的模型：

<ui-select ... ng-change="resetFields()" ... >

在控制器中：

$scope.resetFields = function(){
    $scope.period = null;
    $scope.release = null;
}