Angular ng-options ТОЛЬКО работает, когда ng-repeat работает на той же модели - PullRequest
Новая
       34

Angular ng-options ТОЛЬКО работает, когда ng-repeat работает на той же модели

0 голосов
/ 23 октября 2019

Я работаю над страницей ASP.Net MVC, в которой используется раскрывающийся список, в котором в настоящее время используется тег ng-repeat . Я работаю над решением проблемы, когда раскрывающийся список неправильно выбирает текущее значение модели при загрузке страницы, поэтому я переключил раскрывающийся список для использования ng-options .

My Раскрывающийся список new выглядит следующим образом: 

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

ОБАраскрывающиеся списки правильно загружают свои параметры, но в раскрывающемся списке НИКОГДА не отображается корректно текущее значение модели.

Если страница содержит только раскрывающийся список old на основе ng-repeat этого раскрывающегося спискаотображается правильно.

Я не понимаю, что может вызвать такое поведение в ng-options и что может привести к тому, что раскрывающиеся меню никогда не будут корректно представлять модель при загрузке страницы?

ДОБАВЛЕНО: Итак, предыдущий автор не соответствовал тэгам HTML, и это вызвало ошибку с новым выпадающим списком - почему он не сломал оригинал, я не знаю. При этом новый раскрывающийся список STILL не отображает значение модели при загрузке страницы.

1 Ответ

0 голосов
/ 24 октября 2019

Так что после долгого решения этой проблемы у меня сработало решение:

В игре три 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 только около месяца.

...