javascript - AngularJS 在有效的 ajax 数据到达之前设置虚拟选项元素

Question

据我了解，AngularJS 在使用 ng-model 指令时设置默认值。我需要仅使用 $http.get 检索到的有效选项来填充 select 元素。问题是，在所有有效元素之上，我有一个值为 ? 的虚拟元素。 如何摆脱它？

<select  id="environment" name="environment_name" ng-model="environment"  ng-options="e.name for e in ENVIRONMENTS" required>
                </select>

$scope.ENVIRONMENTS = [];
$http.get("/getEnvironments").success(function(data){
       data.forEach(function(el){
           $scope.ENVIRONMENTS.push(el);
       });
    }).error(function (data) {
        $scope.showErrorMsg("Cannot get ENVIRONMENTS.");
    });
 $scope.environment = $scope.ENVIRONMENTS[0];

Answer 1

您可以向 $scope.ENVIRONMENTS 数组添加临时值，即:

 $scope.ENVIRONMENTS = [{name:"Please wait"}];

从备份中获取数据后将其删除

$scope.ENVIRONMENTS.shift()

请参阅下面的演示

var app = angular.module('app', []);

app.controller('homeCtrl', function($scope, $http) {


  $scope.ENVIRONMENTS = [{
    name: "Please wait"
  }];
  $http.get("/getEnvironments").then(function(data) {
    $scope.ENVIRONMENTS.shift()
    data.forEach(function(el) {

      $scope.ENVIRONMENTS.push(el);
    })

   //set default value after you get data from backend
   $scope.environment = $scope.ENVIRONMENTS[0];

  }, function(data) {

    $scope.showErrorMsg("Cannot get ENVIRONMENTS.");
  });
  $scope.environment = $scope.ENVIRONMENTS[0];

  $scope.showErrorMsg = function(msg) {

    console.log(msg);

  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="homeCtrl">
    
    <select id="environment" name="environment_name" ng-model="environment" ng-options="e.name for e in ENVIRONMENTS" required>
    </select>
  </div>
</div>