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将设置为该用户，替换您的用户服务返回的用户数组。由于用户不是数组，因此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 = [];
    });
 }])

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

1 个答案: