2016-07-27 71 views
1

我试图在我的角度应用程序中实现一个选择,以显示有关表格中电视节目剧集的数据。ng选项在选择中不起作用

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

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

.... 

回答

3

尝试:

<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以及(采用了棱角分明1.5.1)

而且track by episode.id可能不适合您的角度版本的工作,所以你可能需要删除它

在你需要两个赛季数和集数,然后做的情况下如下:

<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> 
+0

这适用于我,但我需要season_number和episode_number显示为“季节1插曲2”。我怎样才能做到这一点? – Igle

+0

@Igle' episode.season_number +''+ episode.episode_number for episode in all_episodes track by episode.id' – Akis

+0

@Igle you can also'group by'' episode.season_number' – Akis