Javascript 根据所选选项显示对象信息
我正在用Angular做水疗。我有一个数组,其中包含站点上每个用户的对象。我有一个ng repeat将所有用户添加到我的下拉列表中。我想知道如何根据下拉列表中选择的用户在输入框中显示特定的用户信息Javascript 根据所选选项显示对象信息,javascript,angularjs,Javascript,Angularjs,我正在用Angular做水疗。我有一个数组,其中包含站点上每个用户的对象。我有一个ng repeat将所有用户添加到我的下拉列表中。我想知道如何根据下拉列表中选择的用户在输入框中显示特定的用户信息 <select id="entityDropDown" ng-options="user.name for user in users" ng-change="userInfo(user)"></select> <div> <label for="e
<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();
}
);
身份证件:
域:
app.controller('userCtrl',
函数userCtrl($scope,siteCollection){
$scope.users=siteCollection.getUsers();
}
);
您可以将ng model=“selectedUser”
附加到您的select和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>
当
更改$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>
身份证件:
域:
K我解决了这个问题
首先,这个ng model=“{{user.domain}}”
不是您使用ng model的方式。我必须更改它们以删除大括号ng model=“user.domain”
我修改了select,如下所示:
<select id="entityDropDown"
ng-model="selectedUser"
ng-options="user as user.name for user in users"
ng-change="userInfo(selectedUser)">
</select>
基本上,控制器获取所有我的用户并将其放入一个用户对象中。select遍历每个用户并生成选项。当所选选项更改时,ng更改将所选用户对象传递给userInfo函数,html将填充该对象信息。抱歉,我不确定从那里开始。我我尝试了这个,但没有成功。我得到了这个错误:语法错误:令牌'selectedUser.id'是意外的,在表达式[{{selectedUser.id}}]的第3列从[selectedUser.id}}]开始,期望[:],蝙蝠侠指出了我的错误,
{}
是用于插值的。我已经更新了sintax,也更新了ng repeat
<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;
};
}
);