Angular ng-options 仅在 ng-repeat 在同一模型上运行时才有效

Question

我正在开发一个 ASP.Net MVC 页面，该页面使用当前使用 ng-repeat 标记的下拉菜单。我正在努力解决在页面加载时下拉菜单无法正确选择当前模型值的问题，因此我将下拉菜单切换为使用 ng-options。

我的新下拉菜单如下所示：

<select id="one" ng-model="data.CommandProvider"
        ng-options="item.ident as item.ProviderName for item in providers">
</select>

当页面加载时，我的新选择显示为一个大的空矩形。它大约是匹配它应该包含的三个项目的宽度和高度，但它不是下拉列表。没有选项，也没有下拉按钮。

但是，当我跟随 new 下拉列表和 old 下拉列表时，如下所示：

<select id="one" ng-model="data.CommandProvider"
        ng-options="item.ident as item.ProviderName for item in providers">
</select>

<select id="two" ng-model="data.CommandProvider">
    <option ng-repeat="opt in providers track by opt.ident"
            value="{{opt.ident}}">
      {{opt.ProviderName}}
    </option>
</select>

两个下拉菜单都正确加载了它们的选项，但下拉菜单都没有正确显示模型的当前值。

如果页面仅包含基于 ng-repeat 的 old 下拉菜单，则该下拉菜单会正确显示。

我不明白什么会导致 ng-options 中出现这种行为，以及什么会导致下拉菜单在页面加载时无法正确表示模型？

添加：所以之前的作者有不匹配的 HTML 标签，这导致了新下拉列表的错误 - 为什么它没有破坏原来的我不知道。话虽如此，新的下拉菜单仍然不会在页面加载时显示模型的值。

Answer 1

所以在解决这个问题太久之后，这是对我有用的解决方案：

三个 http 请求在起作用：一个用于每个选择输入，一个用于模型数据，并且每当模型数据在选择数据之前返回时，选择中的一个或两个将不同步与模型。我的解决方案是同步数据请求。

选择输入：

<select ng-model="data.Connection">
    <option ng-repeat="opt in connections track by opt.ident" value="{{opt.ident}}">{{opt.ConnectionName}}</option>
</select>

<select id="two" ng-model="data.CommandProvider">
    <option ng-repeat="opt in providers track by opt.ident" value="{{opt.ident}}">{{opt.ProviderName}}</option>
</select>

javascript：

        // connection and provider data variables
        $scope.providers;
        $scope.connections;

        // function to retrieve connection dropdown data
        $scope.getConnections = function () {
            $scope.getApiData('GetConnections',
                {}, function (data) {
                    $scope.connections = data;
                });
        }

        // function to retrieve the provider dropdown data
        $scope.getProviders = function () {
            $scope.getApiData('GetProviders',
                {}, function (data) {
                    $scope.providers = data;
                });
        }

        // retrieve the primary page data
        $scope.getCommandData = function () {
            $scope.getApiCommandDataV1('GetCommandById',
                {Id: @ViewBag.ID},
                function (data) {
                    $scope.data = data;
                });
        }

        // retrieves data from the core api
        $scope.getApiData = function (alias, params, successFn, errorFn = null) {
            var qdata = { SqlAlias: alias, SqlParameters: params };
            if (errorFn == null) {
                $http.post('/api/request', qdata).success(successFn);
            } else {
                $http.post('/api/request', qdata).success(successFn).error(errorFn);
            }
        }

        // function to request the data for the page
        $scope.init = function () {
            $scope.getConnections();
        }

        // set a watch on the connections variable to fire when the data
        // returns from the server - this requests the Providers information.
        $scope.$watch('connections', function (newValue, oldValue, scope) {
            if (newValue == undefined || newValue == null)
                return;
            $scope.getProviders();
        }, true);

        // set a watch function on the providers variable to fire when the data
        // returns from the server - this requests the primary data for the Command.
        $scope.$watch('providers', function (newValue, oldValue, scope) {
            if (newValue == undefined || newValue == null)
                return;
            $scope.getCommandData();
        }, true);

        // initialize the page logic and data
        $scope.init();

如您所见，我对 $scope.$watch 的使用强制数据请求是同步的而不是异步的，并且使用此方法可确保每次加载网页时两个选择输入都是正确的。

请随时在此处评论我的编码，因为可能有更好的方法来解决这个问题 - 请记住，我只使用 JavaScript 和 Angular 大约一个月。