AngularJs下拉菜单ng-selected [重复]

Question

我有一组用户属性

$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 时，应在下拉列表中选择“第三”（就像我使用 ng-selected 一样），当我将“第三”更改为“第一”时，应更改 kevin 的数量为 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>