Question

当输入选择以HTML格式加载时，有时从后端获取的数据尚未就绪，并且显示的选择未选择任何选项。

可以在页面中写入输入选择之前等待数据加载吗？

或根据角度值有任何其他方法选择正确的选项。

PS。我无法更改从后端获得的数据，这是所有值的una数组和具有所选选项的另一个变量。第一个总是正确加载，但有时第二个是空的，当我想选择一个选项时。

感谢

Answer 1

尝试在事件stateChangeSuccess

之后获取访问权限

  $scope.$on('$stateChangeSuccess', function() {

            (function() {

            })();

        });

Answer 2

我假设您正在使用异步方法来加载数据。在这种情况下，以下情况应该有效。

首先，有这样的标记：

<div ng-show="loading">
    Loading, please wait...
    <!-- can also put gif animation instead -->
</div>

<select ng-hide="loading">...</select>

在控制器中：

$scope.loading = true;
GetData().then(function() {
    $scope.loading = false;
}, function() {
    $scope.loading = false;
    alert('error');
});

这假设你在一个返回Promise的函数中加载数据，你当然可以在实际加载数据之后将$scope.loading = false;行放在代码中的适当位置。

效果将是$scope.loading设置为 true 时，用户将看到＆＃34;正在加载＆＃34;隐藏下拉列表时显示消息，当您将其设置为 false 时，下拉列表将在＆＃34; Loading＆＃34;消息将被隐藏。

Answer 3

这就是我使用AngularJS，Angular Resource＆amp; amp; Ui-router用于在具有Relationship的实体中显示所选对象：

鉴于我们必须以简单的关系实体：

类：name（String），level（String）。 ----＆GT;在学校上课。

Child：name（String），pseudo（String）。 ----＆GT;一个孩子。

一个孩子可以同时上一堂课，学校里有很多班级。所以我们可以有这样的东西（一对一）：

类：name（String），level（String）。 ----＆GT;在学校上课。

Child：name（String），pseudo（String），class（Class）。 ----＆GT;一个孩子。

在我的Ui-router状态下，我在编辑Child时执行以下操作：这是孩子要编辑的状态，当点击与其对应的链接时，我们会查询他并使用控制器来解析与他相关的实体。

.state('child-edit', {
    parent: 'entity',
    url: '/child/{id:int}',
    views: {
        'content@': {
            templateUrl: 'path/to/chil/view/child-edit.html',
            controller: 'ChildEditController'
        }
    },
    resolve: {
        translatePartialLoader: ['$translate', '$translatePartialLoader', function ($translate, $translatePartialLoader) {
            $translatePartialLoader.addPart('child');
            return $translate.refresh();
        }],
        entity: ['$stateParams', 'ChildService', function($stateParams, ChildService) {
            // We return the child to edit using a service.
            return ChildService.get({id : $stateParams.id});
        }]
    }
})

这是我用来使其正常运行的控制器：

angular.module('myApp').controller('ChildEditController',
    ['$scope', '$stateParams', '$q', 'entity', 'ClassService',
        function($scope, $stateParams, $q, entity, ClassService) {

        // We get all classes of school here.
            $scope.classes = ClassService.query();

        // That is the promise of child to edit get from resolve in state.
        $scope.childToEdit = entity;

        $q.all([$scope.classes.$promise, $scope.childToEdit.$promise]).then(function() {
          // When all data are resolved

          // In Js two objects with same properties and valyes but different memory allocation are different.
          // So I test value of Id before setting the right class of this child and angular will make able to edit
          // him in the UI with the ng-model
          var classOfChild = $scope.childToEdit.class;

          for (var k in $scope.classes) {
              if ($scope.classes[k].id === classOfChild.id) {
                  // We put the same reference of this class: then it will be selected in the UI of select box
                  $scope.childToEdit.class = $scope.classes[k];
              }
          }
        });
}]);

HTML中的相关用户界面：

<!-- The name of Child -->
<div class="form-group">
    <div class="col-md-4">
        <label for="field_child_name">Name of Child</label>
        <input type="text" class="form-control" name="name" id="field_child_name"
                       ng-model="childToEdit.name"
                       required />
    </div>
</div>

<!-- Selected class of child will be display here with all other classes available -->
<div class="form-group">
    <div class="col-md-4">
        <label for="field_child_class">Class of Child</label>
        <select class="form-control" id="field_child_class" name="class" ng-model="childToEdit.class" ng-options="class as class.name + ' : ' + class.level for class in classes">
            <option value=""></option>
        </select>
    </div>
</div>

注意：希望所选数据不显示的情况相同，因为子对象中查询类和属性类的引用不同。

AngularJS：在写入HTML之前等待加载上下文

3 个答案: