AngularJs下拉菜单ng-选择
AngularJs下拉菜单ng-选择
提问于 2018-07-10 08:04:08
我有一系列的用户属性
$scope.userAttributes = [{
id: 112,
order: "first"
}, {
id: 232,
order: "second"
}, {
id: 353,
order: "third"
}, {
id: 485,
order: "fourth"
}];我希望使用order属性作为下拉选项，并使用此代码段。
<select ng-model= "users.number " class="form-control" ng-options="t.order for t in userAttributes">
<option ng-selected="{{t.id== users.number}}">{{t.order}}</option>
</select>我也有很多用户
$scope.users = [{
number: 112,
age: "eigth",
name: "alice"
}, {
number: 232,
age: "ten",
name: "jack"
}, {
number: 353,
age: "twelve",
name: "kevin"
}];我将有一个表单，通过该表单，我将使用下拉列表更改用户的顺序，但我希望看到要根据用户数量预选的order属性。例如，当我选择Kevin时，下拉列表"third“应该以选中的方式出现(就好像我使用ng-selected)，当我将"third”更改为"first“时，kevin的编号应该更改为232。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-10 08:41:34
angular.module('app', []).controller('ctrl', function($scope) {
$scope.userAttributes = [
{ id: 112, order: "first" },
{ id: 232, order: "second" },
{ id: 353, order: "third" },
{ id: 485, order: "fourth" }
];
$scope.orderChanged = () => $scope.user.number = $scope.order.id;
$scope.users = [
{ number: 112, age: "eigth", name: "alice" },
{ number: 232, age: "ten", name: "jack" },
{ number: 353, age: "twelve", name: "kevin" }
];
$scope.user = $scope.users[0];
$scope.userChanged = () =>
$scope.order = $scope.userAttributes.find(x => x.id == $scope.user.number);
$scope.userChanged();
}).active{
background-color:orange;
}<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<div ng-app='app' ng-controller='ctrl'>
<select ng-model= "order" ng-options="t.order for t in userAttributes" ng-change='orderChanged()'>
</select>
<select ng-model= "user" ng-options="u.number for u in users" ng-change='userChanged()'>
</select>
<br>
<ul ng-repeat='user1 in users'>
<li ng-class='{active: user1 === user}'>{{user1}}</li>
</ul>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51260055
复制相关文章
相似问题
腾讯云开发者
