Selectpickerがテーブルの列に表示されない

Question

私はムービーのテーブルを持っており、ng-repeatを使用してその行を表示しています。しかし、各列には映画の変数（名前、監督、俳優、年など）が表示され、そのうちの1つはジャンルですが、映画は複数のジャンルを持つことができます。だから、私はこれを行うために選択を使用しています。

問題は、私の選択は画面に表示されません！ここで

<div class="container" style="margin-top: 30px; min-width: 90%" ng-controller="adminController"> 
<table class="table table-hover"> 
        <thead> 
         <tr> 
          <th> 
           <h2>Filme</h2> 
          </th> 
          <th> 
           <h2>Ano</h2> 
          </th> 
          <th> 
           <h2>Diretor</h2> 
          </th> 
          <th> 
           <h2>Ator/Atriz</h2> 
          </th> 
          <th> 
           <h2>Pontuação</h2> 
          </th> 
          <th> 
           <h2>Generos</h2> 
          </th> 
          <th> 
           &nbsp; 
          </th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr> 
          <td><input class="form-control" ng-model="novoFilme.nome" placeholder="Nome do filme"/></td> 
          <td><input class="form-control" ng-model="novoFilme.ano" placeholder="Ano do filme"/></td> 
          <td><input class="form-control" ng-model="novoFilme.diretor" placeholder="Diretor do filme"/></td> 
          <td><input class="form-control" ng-model="novoFilme.ator" placeholder="Ator/atriz do filme"/></td> 
          <td><input class="form-control" ng-model="novoFilme.pontuacao" placeholder="Pontuação do filme"/></td> 
          <td> 
           <select class="selectpicker" title="Nenhum selecionado" ng-model="novoFilme.generos" ng-options="genero.value as genero.nome for genero in generos" multiple> 

           </select> 
          </td> 
          <td style="text-align: right"><button class="btn btn-primary" ng-click="addFilme()">Adicionar Filme</button></td> 
         </tr> 
         <tr ng-repeat="filme in filmes"> 
          <td><input class="form-control" ng-model="filme.nome"/></td> 
          <td><input class="form-control" ng-model="filme.ano"/></td> 
          <td><input class="form-control" ng-model="filme.diretor"/></td> 
          <td><input class="form-control" ng-model="filme.ator"/></td> 
          <td><input class="form-control" ng-model="filme.pontuacao"/></td> 
          <td> 
           <select class="selectpicker" title="Nenhum selecionado" ng-options="genero.value as genero.nome for genero in generos" multiple> 

           </select> 
          </td> 
          <td style="text-align: right"><button class="btn btn-danger" ng-click="remove(filme._id)">Remover</button></td> 
         </tr> 
        </tbody> 
       </table> 
</div> 

は私のコントローラです：

app.controller('adminController', function ($scope, $http) { 
    $scope.generos = [ 
     { 
      nome: "Comédia", 
      value: "Comédia" 
     }, 
     { 
      nome: "Comédia Romântica", 
      value: "Comédia Romântica" 
     }, 
     { 
      nome: "Drama", 
      value: "Drama" 
     }, 
     { 
      nome: "Ação", 
      value: "Ação" 
     }, 
     { 
      nome: "Policial", 
      value: "Policial" 
     }, 
     { 
      nome: "Suspense", 
      value: "Suspense" 
     }, 
     { 
      nome: "Terror", 
      value: "Terror" 
     } 
    ]; 

    var atualizar = function() { 
     $http.get('/filmes').success(function (response) { 
      $scope.filmes = response; 
      $scope.novoFilme = ""; 
     }); 
    }; 

    atualizar(); 

    $scope.addFilme = function() { 
     $http.post('/filmes', $scope.novoFilme).success(function (response) { 
      atualizar(); 
     }); 
    }; 

    $scope.remove = function (id) { 
     $http.delete('/filmes/' + id).success(function (response) { 
      atualizar(); 
     }); 
    }; 

    $scope.save = function() { 
     for (i = 0; i < $scope.filmes.length; i++) { 
      $http.put('/filmes/' + $scope.filmes[i]._id, $scope.filmes[i]).success(function (response) { 
       atualizar(); 
      }); 
     } 
    }; 
}); 

誰もがどのように知っている、これは角度の問題ですか、私は何か間違ったことをやっている場合、私はここで

が私のテーブル..ですかわかりません別の方法でこれを行う方法やアイデアを修正するには？

編集：ここでは はスクリーンショットです：

http://imgur.com/a/bXgBK

Answer 1

この問題は選択クラスに過ぎません。この場合はclass="selectpicker"ですが、なぜこの問題が発生しているのか分かりませんが、このクラスを削除すると問題なく動作します。

このクラスはSilvio Moretoブートストラップのクラスであり、下のリンクから見つけることができます。

https://silviomoreto.github.io/bootstrap-select/

Answer 2

まあ、ngOptionsはngModelディレクティブが必要ですので、あなたの<select>タグでそれを使用する必要があります。

Controller 'ngModel', required by directive 'ngOptions', can't be found!

ので、の代わりに：：

<select class="selectpicker" title="Nenhum selecionado" 
    ng-options="genero.value as genero.nome for genero in generos" multiple> 

用途：

<select ng-model="genero" class="selectpicker" title="Nenhum selecionado" 
    ng-options="genero.value as genero.nome for genero in generos" multiple> 

あなたのコンソール（[F12]キーを押す）を見れば

このエラーが表示されます

ヒント：何か問題が発生したときにエラーを表示するには、常にコンソール（F12）を見てください。