根据所选选项显示对象信息

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

K 我解决了这个问题。

首先，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填充该对象信息。

Answer 2

您可以将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>