CODEWITHSUNDEEP
javascriptjqueryangularjs
Aeptitude
Aeptitude

Reputation: 312

AngularJS select items not resetting to first / default value

I'm at my wits end! In angular I've got a controller and a view. There are 2 dropdowns on the page which need to reset to default once the restart button has been clicked.

I can set the value of the boxes as they render by pushing a "select" option into the collection inside the controller. However, when the reset button is pressed, which runs the init() method again, the dropdowns should be set back to the first value. This doesn't occur, the values for $scope.selectedYear and $scope.selectedReport remain as they did before the reset button was pressed.

This is the full code for the controller

function TreeReportsCHLController($scope, $q, $routeParams, reportsDashboardResource, navigationService, notificationsService, dialogService, entriesManageDashboardResource, $timeout) {

    // Methods


    var generalError = function () {
        notificationsService.error("Ooops", "There was an error fetching the data");
        $scope.actionInProgress = false;
    }

    // Scope
    $scope.selectedYear = "";


    $scope.init = function () {

        $scope.hasCompleted = false;
        $scope.actionInProgress = false;
        $scope.yearSelected = false;
        $scope.reportTypes = ["Choose", "Entered", "ShortListed", "Winner", "Recieved"];
        $scope.selectedReport = "";
        $scope.entryYears = new Array();
        $scope.entryYears.push("Choose a Year");
        entriesManageDashboardResource.getEntryYears().then(function (response) {
            angular.forEach(response, function (value, key) {
                $scope.entryYears.push(value);
            });
        });

        $scope.selectedYear = $scope.entryYears[0];
            $scope.selectedReport = $scope.reportTypes[0];


    };

    $scope.yearHasSelected = function(selectedYear) {
        $scope.yearSelected = true;
        $scope.selectedYear = selectedYear;
    };


    $scope.generateFile = function (selectedReport) {
        $scope.actionInProgress = true;
        var reportDetail = {
            entryYear: $scope.selectedYear,
            chosenEntryStatus: selectedReport
        };

        reportsDashboardResource.generateEntriesReportDownloadLink(reportDetail).then(function (response) {
            if (response.Successful) {
                $scope.hasCompleted = true;
            } else {
                notificationsService.error("Ooops", response.ErrorMessage);
            }
            $scope.actionInProgress = false;
        }, generalError);
    };

    $scope.restart = function () {
        $scope.init();
    }



    // Initialise Page

    $scope.init();

}

angular.module("umbraco").controller("ReportsDashboardController", TreeReportsCHLController)

this is the code with the dropdowns in it;

<table>
    <tr>
        <td>Get a report for year: {{selectedYear}}</td>
        <td><select ng-model="selectedYear" ng-change="yearHasSelected(selectedYear)" ng-options="year for year in entryYears" no-dirty-check></select></td>
    </tr>
    <tr ng-show="!hasCompleted && yearSelected">
        <td>
            Get Report Type:
        </td>
        <td>
            <select ng-model="selectedReport" ng-change="generateFile(selectedReport)" ng-options="status for status in reportTypes" no-dirty-check  ng-disabled="actionInProgress"></select>
        </td>
    </tr>
</table>

I've also done a further test where I simply set $scope.selectedYear to $scope.entryYears[0] within the reset method. When I console.log $scope.selectedYear here, the value confirms it has been changed, but strangely where I've outputted the $scope.selectedYear / {{selectedYear}} to the page for testing, this does not update. It's almost as though the binding between the controller and the view isn't occuring.

Any help?

Thank-you.

Upvotes: 0

Views: 1172

Answers (1)

jbrown
jbrown

Reputation: 3025

Here's a working plunk that is somewhat stripped down since I didn't have access to of the services that your are injecting into your controller. The changes I made in the controller are:

First,

$scope.entryYears = new Array();

becomes

$scope.entryYears = [];

as this is the preferred way to declare an array in js.

Second, I removed $scope.apply() that was wrapping 

$scope.selectedYear = $scope.entryYears[0];
$scope.selectedReport = $scope.reportTypes[0];

as this was causing infinite digest cycles.

Upvotes: 1

Related Questions