У меня есть таблица фильмов, и я использую ng-repeat для отображения строк. Но в каждом столбце отображается переменная фильма (например, имя, режиссер, актер, год..), и один из них - жанр, но фильм может иметь несколько жанров. Итак, я использую выбор для этого.
Проблема в том, что мой выбор просто не отображается на экране! Я не знаю, является ли это угловой проблемой, или я что-то делаю неправильно.
Вот мой стол:
<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>
</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();
});
}
};
});
Кто-нибудь знает, как это исправить или какие-то идеи, как это сделать по-другому?
Изменение: вот снимок экрана:
Я обнаружил, что проблема - это только класс select, в этом случае class="selectpicker"
, я не знаю, почему это вызывает проблему, но если вы удалите этот класс, он будет работать нормально.
Просто, чтобы знать, этот класс является классом из бутстрапа Silvio Moreto, который вы можете найти в ссылке ниже.
Ну, ngOptions
требует директивы ngModel
, поэтому вы должны использовать ее в <select>
.
Если вы посмотрите на свою консоль (нажав F12), вы увидите эту ошибку:
Контроллер 'ngModel', требуемый директивой 'ngOptions', не может быть найден!
Итак, вместо:
<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), чтобы увидеть ошибки, когда что-то пошло не так.