Угловые списки 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

нг-модель связана с $ 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 = []; 
    }); 
}])