Question

我有一张电影表，我正在使用ng-repeat来显示行。但是每一列都显示了电影变量（如名字，导演，演员，年份......），其中一个是流派，但电影可以有多种类型。所以，我正在使用select来做到这一点。

问题是，我的选择只是不会出现在屏幕上！我不知道这是一个有角度的问题还是我做错了什么..

这是我的表：

<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

好吧，ngOptions 需要 ngModel指令，因此您必须在<select>代码中使用它。

如果您查看控制台（按F12键），您将看到此错误：

指令'ngOptions'所需的控制器'ngModel'不能发现！

所以，代替：

<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）以查看错误。

Answer 2

我发现问题只是选择类，在这种情况下是class="selectpicker"，我不知道为什么会导致这个问题，但如果你删除这个类就行了。

要知道，这个课程是来自Silvio Moreto bootstrap select的课程，你可以在下面的链接中找到。

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

Selectpicker不会显示在表格列中

2 个答案: