选择某些内容后，Angular ngOptions 列表为空白

Question

我的基本设置是 Nodejs、MongoDB 和 Angular。我正在使用 ngOptions 制作一个从数据库中提取的下拉列表，并在其下方显示用于选择的数据。

页面加载时一切正常。该列表已填充，当我选择某些内容时，将显示我选择的值。但是在我做出选择之后，不再填充选项列表。我对 Node 和 Angular 还是有点陌生​​，可能忽略了一些东西，但我不知道是什么。

这是我正在使用的控制器和工厂：

angular.module('app', ['ngRoute'])
     .factory('Users', ['$http', function($http) {
        return $http.get('/users');
     }])
     .controller('UserController', ['$scope', 'Users', function($scope, Users) {
        Users.success(function(data) {
            $scope.users = data;
        }).error(function(data, error) {
            console.log(error);
            $scope.users = [];
        });
     }])

这是我正在使用的页面代码：

      <div ng-controller="UserController">
      <span  class="nullable">
        <select ng-model="users" ng-options="user.name for user in users">
            <option value="">--choose user--</option>
        </select>
    </span>
  <br/>
    <ul>
      <li>Name: {{users.name}}</li>
      <li>EID: {{users.emp_id}}</li>
    </ul>
    </div>

Answer 1

ng-model 绑定到 $scope.users，所以当你选择一个用户时，$scope.users 被设置为那个用户，替换你的用户服务返回的用户数组。由于 user 不是数组，ng-options 不知道要显示什么，所以什么也不显示。

你可能想要

<select ng-model="selectedUser" ng-options="user.name for user in users">
    <option value="">--choose user--</option>
</select>

$scope.selectedUser 将包含您选择一个后选择的用户。

顺便说一句，如果你想预先选择一个用户（例如，第一个用户，你可以这样修改你的控制器：

 controller('UserController', ['$scope', 'Users', function($scope, Users) {
    Users.success(function(data) {
        $scope.users = data;
        if($scope.users.length > 0) {
            $scope.selectedUser = $scope.users[0];
        }
    }).error(function(data, error) {
        console.log(error);
        $scope.users = [];
    });
 }])