2016-07-27 2 views
1

테이블에서 TV 쇼 에피소드에 대한 데이터를 표시하기 위해 각도 앱에서 선택을 구현하려고합니다.선택에서 ng-options이 작동하지 않습니다.

선택에서 사용자는 에피소드 중 하나를 선택할 수 있어야합니다.

나는 시도한 옵션 요소 인 ng-repeat을 보았습니다. 그러나 선택을 위해 ng-options을 설정하려고하면 인식되지 않는 것처럼 보입니다.

어떤 생각이든, 내가 뭘 잘못 생각 했니?

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

그리고 내 컨트롤러 : 여기

내 HTML입니다

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 사용)입니다 다음 :

<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

나를 위해 작동하지만 "시즌 1 에피소드 2"와 같이 표시하려면 season_number와 episode_number가 필요합니다. 어떻게해야합니까? – Igle

+0

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

+0

@Igle 또한'episode.season_number '에 의해 그룹화 할 수 있습니다. – Akis

관련 문제