Reset field's value with AngularJS

Question

I have a problem with AngularJS. I have 3 fields (Site, Period, Release). I click first on Site [01], the Period [02] field appears. When I click on Period [02], the Release [03] field appears. OK. But when I change the Site [CHANGE], the Period and Release fields must remove the seized information (actually, the fields don't change). Thank you in advance for your response.

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});
};

Andonaeus · Accepted Answer · 2016-06-02 13:29:40Z

1

Add an ng-change tag to your ui-select element that is bound to a function that resets the models bound to the other two views:

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

In controller:

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

answered Jun 2, 2016 at 13:29

Andonaeus

8721 gold badge5 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andonaeus Over a year ago

@KevinPy can you please provide a plunkr with the core functionality?

Collectives™ on Stack Overflow

Reset field's value with AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related