简体   繁体   中英

Ng-model in select options

I have a list of questions, with the question and the answer, but the answer the user will choose in my select. How can I do that? I tried this, but the select doesn't show up in the screen.

HTML:

<div ng-controller="mainController" class="container" style="margin-top: 10%">
        <div class="jumbotron">
            <div id="inicio">
                <h1 style="text-align: center">Ache aqui um filme perfeito para você assistir agora!</h1>
                <div class="center-block" style="margin-top: 30px">
                    <button ng-click="comecarPerguntas()" class="btn btn-success center-block" style="margin:0px auto;">Começar!</button>
                </div>
            </div>
            <div id="pergunta" ng-switch="pergunta" class="container">
                <div ng-switch-when="-1"></div>
                <div ng-switch-default>
                    <h2>{{perguntas[pergunta].pergunta}}</h2>
                    <select class="selectpicker">
                        <option ng-model="perguntas[pergunta].resposta">Sim</option>
                        <option ng-model="perguntas[pergunta].resposta">Não</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

JS:

knnapp.controller('mainController', function ($scope) {
$scope.pergunta = -1;

$scope.perguntas = [
    {
        pergunta: "Você está feliz hoje?",
        resposta: ""
    },
    {
        pergunta: "Você está cansado?",
        resposta: ""
    },
    {
        pergunta: "Gosta de heróis?",
        resposta: ""
    }
];

$scope.comecarPerguntas = function () {
    angular.element(document.querySelector('#inicio')).css("display", "none");
    $scope.pergunta = 0;
};

});

ngModel should be on select element:

<select class="selectpicker" ng-model="perguntas[pergunta].resposta">
    <option value="yes">Sim</option>
    <option value="no">Não</option>
</select>

From the angular documentation, this is the appropriate way to implement select:

<select ng-options="item.subItem as item.label for item in items track by item.id" ng-model="selected"></select>

Source: https://docs.angularjs.org/api/ng/directive/ngOptions

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM