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变量像holder一样将信息显示到其他地方，例如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>

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

2 个答案: