Angular 选择内容后 ngOptions 列表空白

Question

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

页面加载时一切正常。该列表已填充，当我 select 某些东西时，我的 selection 的值就会显示出来。但是在我制作 selection 之后，选项列表不再填充。我对 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，所以当你 select 一个用户时，$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 将包含您 select 之后的 selected 用户。

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

 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 = [];
    });
 }])

Angular 选择内容后 ngOptions 列表空白

Angular ngOptions list blank after selecting something

javascript

mongodb

node.js

angularjs