AngularJS如何從HTML文件中恢復答案

Question

早上好，我像2天前一樣開始了AngularJS，我正在嘗試做一個練習，該練習是一個包含三個問題的表格（目前），每個問題有3個答案，每個答案都有一個分數，該分數將在計算出哪個類別后確定用戶應答屬於。

到目前為止，我所做的是：

 app = angular.module('app', []); app.controller('qcmController', function($scope) { $scope.categories = [{ name: 'humain', description: 'categorie humain', score: 0 }, { name: 'Dev', description: 'categorie Developpeur', score: 0 }, { name: 'Nos Nos', description: 'categorie Mis-dev,Mis-humain', score: 0 } ]; $scope.qst = [{ label: 'Aimez-vous Ruby ?', rep: [{ label: 'j"adore', categorie: 'dev', point: '10' }, { label: 'oui', categorie: 'Nos Nos', point: '10' }, { label: 'C"est quoi Ruby ?', categorie: 'humain', point: '10' } ] }, { label: 'c"est quoi Java ?', rep: [{ label: 'Langage de programation', categorie: 'dev', point: '10' }, { label: 'Langage', categorie: 'Nos Nos', point: '10' }, { label: '9ahwa :) ?', categorie: 'humain', point: '10' } ] }, { label: 'Vous aimez la programation?', rep: [{ label: 'j"adore', categorie: 'dev', point: '10' }, { label: 'oui', categorie: 'Nos Nos', point: '10' }, { label: 'c"est quoi la programation ?', categorie: 'humain', point: '10' } ] }, ]; }); 

 <script src="https://code.angularjs.org/1.4.6/angular.min.js"></script> <div ng-app="app"> <div ng-controller="qcmController"> <ul> <li ng-repeat="cat in categories"> <b ng-bind="cat.name"></b> </li> </ul> <form ng-submit=""> <ul> <li ng-repeat="question in qst"> <b ng-bind="question.label"></b> <ul> <li ng-repeat="rep in question.rep"> <input type="checkbox"> <span ng-bind="rep.label"></span> </li> </ul> </li> </ul> <input class="btn-primary" type="submit" value="add"> </form> </div> </div> 

我的問題是我不知道如何恢復答案，以便可以計算出該分數。

Answer 1

使用復選框上的ng-model可以存儲selected布爾值。 檢出提交時選擇的項目的控制台日志對象：

<form ng-submit="calc()">
<ul>
    <li ng-repeat="question in qst">
        <b ng-bind="question.label"></b>
        <ul>
                <li ng-repeat="rep in question.rep">
                    <input type="checkbox" ng-model="rep.selected"> <span ng-bind="rep.label"></span>
                </li>
            </ul>
    </li>
</ul>
<input class="btn-primary" type="submit" value="add">

app.js

app=angular.module('app', []);
app.controller('qcmController', function($scope){
    $scope.categories = 
    [
        {name: 'humain', description:'categorie humain', score: 0},
        {name: 'Dev', description:'categorie Developpeur', score: 0},
        {name: 'Nos Nos', description:'categorie Mis-dev,Mis-humain', score: 0}
    ];


    $scope.qst = 
    [
        {label:'Aimez-vous Ruby ?', rep :[{label:'j"adore', categorie:'dev', point:'10'},
                                        {label:'oui', categorie:'Nos Nos', point:'10'},
                                        {label:'C"est quoi Ruby ?', categorie:'humain', point:'10'}  ]},

        {label:'c"est quoi Java ?', rep :[{label:'Langage de programation', categorie:'dev', point:'10'},
                                        {label:'Langage', categorie:'Nos Nos', point:'10'},
                                        {label:'9ahwa :) ?', categorie:'humain', point:'10'}  ]},
        {label:'Vous aimez la programation?', rep :[{label:'j"adore', categorie:'dev', point:'10'},
                                                    {label:'oui', categorie:'Nos Nos', point:'10'},
                                                    {label:'c"est quoi la programation ?', categorie:'humain', point:'10'}  ]},
    ];

    $scope.calc = function () {
        console.log($scope.qst);
    };
})