使用 angular 动态预选下拉菜单

Question

在 javascript 中，我有两个对象数组，我正在尝试使用 angular.js:

在 html 中创建下拉菜单

$scope.members=[
    {name: "Paul", position: "Vocals"},
    {name: "John", position: "Guitar"},
    {name: "George", position: "Guitar"},
    {name: "Ringo", position: "Drums"}
];

$scope.positions=[
    {label: "Guitar"},
    {label: "Vocals"},
    {label: "Drums"}
];

HTML:

<select>
    <option ng-repeat="position in positions">
        {{member.position}}
    </option>
</select>

当前的HTML正在使用成员的位置并将其复制3次作为下拉列表中的唯一选项。例如，在加载页面时，Ringo 的位置在下拉列表中被预选为 "drums"（这是应该的方式）。但是当点击下拉菜单时，Ringo 的选项是 "drums" 和 "drums"，以及 "drums"。它们应该是 "drums"、"vocals" 和 "guitar"。

有没有办法让所有选项都可用，并在加载时预先选择正确的选项？正确的指令是什么？

Answer 1

AngularJS 有一个专门用于 select 控件的指令。用它代替 ng-repeat

https://docs.angularjs.org/api/ng/directive/ngOptions

working plunkr

var app = angular.module('plunker', []);

app.controller("MyCtrl", function ($scope) {
    $scope.members = [
        {name: "Paul", position: "Vocals", alive: true},
        {name: "John", position: "Guitar", alive:  false},
        {name: "George", position: "Guitar", alive:  false},
        {name: "Ringo", position: "Drums", alive: true}
    ];
    
    $scope.positions = [
        {label: "Guitar"},
        {label: "Vocals"},
        {label: "Drums"}
    ];
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.9/angular.js" data-semver="1.3.9"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <div ng-controller="MyCtrl">
        <ul>
            <li ng-repeat="member in members">
                {{member.name}}
                <select ng-options="position.label as position.label for position in positions" ng-model="member.position"></select>
                <input type="checkbox" ng-model="member.alive">Alive?</input>
            </li>
        </ul>

        <pre>
{{members | json}}
        </pre>
    </div>
  </body>

</html>

Answer 2

<select ng-model="selectedBeetle" ng-options="member as member.name for member in members"></select>
<select ng-model="selectedBeetle.position" ng-options="position.label for position in positions"></select>

使用 angular 动态预选下拉菜单

Dynamically preselected dropdowns with angular

angularjs

drop-down-menu

angularjs-directive