Средство выбора не отображается внутри столбца таблицы

0

У меня есть таблица фильмов, и я использую 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>
                                &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

2 ответа

0
Лучший ответ

Я обнаружил, что проблема - это только класс select, в этом случае class="selectpicker", я не знаю, почему это вызывает проблему, но если вы удалите этот класс, он будет работать нормально.

Просто, чтобы знать, этот класс является классом из бутстрапа Silvio Moreto, который вы можете найти в ссылке ниже.

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

0

Ну, 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), чтобы увидеть ошибки, когда что-то пошло не так.

  • 0
    Ну, я добавил ng-model = "filme.generos", потому что я хочу, чтобы это были мои жанры кино, но все еще не работает, и на самом деле в моей консоли ничего нет.
  • 0
    Странно .. это работает здесь: plnkr.co/edit/caxeIyXtlSVoWbNdSXWE?p=preview Также вы можете удалить это свойство "title". Если вы хотите установить значение по умолчанию, сделайте то, что я сделал в моем plnkr.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню