AngularJs 下拉菜单 ng-selected

Question

我有一组用户属性

$scope.userAttributes = [{
    id: 112,
    order: "first"
}, {
    id: 232,
    order: "second"
}, {
    id: 353,
    order: "third"
}, {
    id: 485,
    order: "fourth"
}];

并且我想将订单属性用作此代码段的下拉选项

<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"
}];

我将通过一个表单使用下拉列表更改用户的顺序，但我希望看到根据用户数量预先选择的顺序属性。例如，当我选择 Kevin 时，在下拉列表中 "third" 应该被选中（就像我用 ng-selected 做的一样），当我将 "third" 更改为 "first" 时，凯文的人数应更改为 232。

Answer 1

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>

AngularJs 下拉菜单 ng-selected

AngularJs Dropdown menu ng-selected

javascript

angularjs

drop-down-menu

ng-options