繁体   English   中英

选择选项中的Ng模型

[英]Ng-model in select options

我有一个问题列表,问题和答案,但用户将在我的选择中选择答案。 我怎样才能做到这一点? 我试过这个,但是选择没有显示在屏幕上。

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应该在select元素上:

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

从angular文档中,这是实现select的适当方法:

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

资料来源: https//docs.angularjs.org/api/ng/directive/ngOptions

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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