2016-07-27 3 views
1

私の角型アプリケーションでselectを実装しようとしています。これは、テーブルにテレビ番組のエピソードに関するデータを表示するためです。選択肢でng-optionsが機能しません

選択では、ユーザーはエピソードの1つを選択できる必要があります。

私は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

試してみてください。詳細情報はng-options documentation

そして、ここで見つけることができ

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

example jsfiddleは同様にあなたは、両方のシーズン番号やエピソード番号が必要です場合は、それを

を削除する必要がある場合がありますので、角度のバージョンに動作しない場合があります。また

track by episode.id(角度1.5.1を使用して)であります次のようになります:

+0

これは私にとっては効果的ですが、「Season 1 Episode 2」のように表示するにはseason_numberとepisode_numberが必要です。これどうやってするの? – Igle

+0

@Igle 'episode.season_number + '' episode.episode_number by all_episodesトラックby episode.id' – Akis

+0

@Igle' group by 'episode.season_number' – Akis

関連する問題