javascript - AngularJS 选择项目未重置为第一个/默认值

Question

我已经束手无策了!在 Angular 中我有一个 Controller 和一个 View 。页面上有 2 个下拉菜单，单击重新启动按钮后需要重置为默认值。

我可以通过将“选择”选项插入 Controller 内的集合来设置渲染框的值。但是，当按下重置按钮时，再次运行 init() 方法，下拉列表应设置回第一个值。这种情况不会发生，$scope.selectedYear 和 $scope.selectedReport 的值保持按下重置按钮之前的状态。

这是 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)

这是带有下拉菜单的代码；

<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>

我还做了进一步的测试，我只是在重置方法中将 $scope.selectedYear 设置为 $scope.entryYears[0] 。当我在此处 console.log $scope.selectedYear 时，该值确认它已更改，但奇怪的是，当我将 $scope.selectedYear/{{selectedYear}} 输出到页面进行测试时，它不会更新。这几乎就像 Controller 和 View 之间没有发生绑定(bind)一样。

有什么帮助吗？

谢谢。

Answer 1

这是一个工作 plunk由于我无权访问您注入(inject) Controller 的服务，因此这在某种程度上被精简了。我在 Controller 中所做的更改是:

首先

$scope.entryYears = new Array();

变成了

$scope.entryYears = [];

因为这是在 js 中声明数组的首选方式。

其次，我删除了包装的 $scope.apply()

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

因为这会导致无限的消化循环。