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.