Question

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

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

我尝试了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>

我的控制员：

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>

ng-options在select中不起作用

1 个答案: