Отобразить информацию об объекте на основе выбранной опции

Question

Я использую Angular для SPA, над которым я работаю. У меня есть массив, который содержит объекты для каждого пользователя на моем сайте. У меня есть ng-repeat, чтобы добавить всех пользователей в раскрывающийся список. Я пытаюсь выяснить, как отображать конкретную информацию пользователя в окне ввода на основе выбранного пользователя из раскрывающегося списка?

<select id="entityDropDown" ng-options="user.name for user in users" ng-change="userInfo(user)"></select> 


<div> 
    <label for="entityId">ID: </label> 
    <input type="text" id="entityId" disabled ng-model="{{user.id}}"/> 
    </br> 
    <label for="entityDomain">Domain: </label> 
    <input type="text" id="entityDomain" disabled ng-model="{{user.domain}}"/> 
</div> 

app.controller('userCtrl', 
    function userCtrl($scope,siteCollection){ 
     $scope.users = siteCollection.getUsers(); 

    } 
); 

Answer 1

вы можете добавить ng-model="selectedUser" в ваш выбор и ваш userCtrl

<!-- template.html --> 
<select id="entityDropDown" ng-options="user as user.name for user in users" ng-model="selectedUser"> 
</select> 

<div class="user-info" ng-show="selectedUser"> 
    <p> {{selectedUser.name}}</p> 
    <!-- ... --> 
</div> 

в контроллере

// controller.js 
function userCtrl($scope, siteCollection){ 
    $scope.users = siteCollection.getUsers(); 
    $scope.$watch('selectedUser', function(oldVal, newVal) { 
     if (oldVal === newVal) return; 
     //do something like call JSON if need it 
    }); 
} 

Когда <select> изменяет $scope.selectedUser изменения выбранного значения. позже вы можете использовать selectedUser переменные как держатель для показа информации в другое место, как и в div.user-info или вы можете использовать $scope.$watch('selectedUser'... для огня другого поведения, как обратиться за помощью к услугам или любой другому

используя шаблон

<select id="entityDropDown" ng-options="user in users" ng-model="selectedUser"> 
    <!-- <option ng-repeat="user in users">{{user.name}}</option> --> 
</select> 

<div> 
    <label for="entityId">ID: </label> 
    <input type="text" id="entityId" disabled ng-model="selectedUser.id"/> 
    </br> 
    <label for="entityDomain">Domain: </label> 
    <input type="text" id="entityDomain" disabled ng-model="selectedUser.domain"/> 
</div> 

Answer 2

KI решила проблему.

Прежде всего, это ng-model="{{user.domain}}" не так, как вы используете ng-model. Мне пришлось сменить их, чтобы удалить фигурные скобки ng-model="user.domain".

Я модифицировал выбрать, как, например:

<select id="entityDropDown" 
    ng-model="selectedUser" 
    ng-options="user as user.name for user in users" 
    ng-change="userInfo(selectedUser)"> 
</select> 

Это моя функция контроллера:

spApp.controller('userCtrl', 
    function userCtrl($scope,siteCollection){ 
     $scope.users = siteCollection.getUsers(); 
     $scope.selectedUser = {}; 
     $scope.userInfo = function(user) { 
      $scope.selectedUser = user; 
     }; 

    } 
); 

В основном контроллер получает все мои пользователи и помещает его в объект пользователя. Выбор осуществляется через каждого пользователя и генерирует параметры. Когда выбранный параметр изменяется, ng-change передает выбранный пользовательский объект функции userInfo, и html заполняет эту информацию об объектах.