AngularJS在有效的ajax数据到达之前设置伪选项元素

AngularJS setting dummy option element before valid ajax data arrives

本文关键字：设置 元素 选项 有效 ajax 数据 AngularJS      更新时间：2023-09-26

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

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

您可以将临时值添加到$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>

相关文章：