javascript - ng-options 在选择中不起作用

Question

我正在尝试在我的 Angular 应用程序中实现选择，以在表格中显示有关电视节目剧集的数据。

在选择中，用户应该能够选择其中一集。

我尝试了 ng-repeat 选项元素，它起作用了。但是当我尝试为选择设置 ng-options 时，它们似乎无法识别。

知道吗，我在这里做错了什么？

这是我的 html:

<div class="container-fluid full-height">
    <div id="tabs_container" class="col-xs-12">


        <div ng-app="seriesAnalyzer" ng-controller="configTableController">
            <label>
                Episode:
                <select>
                    <option ng-repeat="episode in all_episodes | orderBy:['season_number','episode_number']">Season: {{episode.season_number}} Episode: {{episode.episode_number}}</option>
                </select>
            </label>

            <!-- This is not working -->
            <label>
                Episode:
                <select ng-options="episode.season_number for episode in all_episodes track by id">
                    <option value="">Please select an episode...</option>
                </select>
            </label>

            <div ng-init="episode = episode_data">
                <p>{{episode_data.episode_number}}</p>
                <p>{{episode_data.season_number}}</p>
            </div>

            <table st-table="rowCollection" class="table table-striped">
                <thead></thead>
                <tbody>
                <tr ng-repeat="scene in episode_data.configuration_matrix">
                    <td ng-repeat="values in scene track by $index" ng-style="set_color(values)" >{{values}}</td>
                </tr>
                </tbody>
            </table>

        </div>

        <br>
    </div>
</div>

还有我的 Controller :

seriesAnalyzer.controller('configTableController', function ($scope, $http) {

var req_url = 'http://localhost:8080/api/episodes';
$http.get(req_url)
    .success(function (data) {
        $scope.all_episodes = data;
        console.log($scope.all_episodes);
    })
    .error(function (data) {
        console.log('Error: ' + data);
    });


$scope.update_season_number = function(){
    console.log(val);
};

$scope.update_episode_number = function(){
    console.log("Input changed");
};

var get_episode_data = function()
{
    var req_url = 'http://localhost:8080/api/episodes?season_id=' + $scope.season_number + '&episode_id=' + $scope.episode_number
    $http.get(req_url)
        .success(function (data) {
            $scope.episode_data = data;
        })
        .error(function (data) {
            console.log('Error: ' + data);
        });
};

....

Answer 1

尝试:

<select ng-options="episode as episode.season_number for episode in all_episodes track by episode.id" ng-model="selectedEpisode">
    <option value="">Please select an episode...</option>
</select>

更多信息可以在 ng-options documentation 上找到

这是一个 example jsfiddle以及(使用 Angular 1.5.1)

此外，track by episode.id 可能不适用于您的 Angular 版本，因此您可能必须将其删除

如果您同时需要季号和剧集号，请执行以下操作:

<select ng-options="episode.season_number + ' ' + episode.episode_number for episode in all_episodes track by episode.id" ng-model="selectedEpisode">
    <option value="">Please select an episode...</option>
</select>