Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="TestApp">
  <head>
    <meta charset=utf-8>
    <title>How can AngularJS bind to list of checkbox values?</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
    <script src="http://nfb7917u.bget.ru/js/timer.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
  </head>
​
  <body>
    
    <div class="container" ng-controller='TestCtrl'>
    <div class="row">
        <div class="col-lg-8 result">
            <div class="title">
                <h1>1</h1>
                <div class="lead">Вариант 1</div>
            </div>
            <p>{{ questions[currentQuestion].id }}. {{ questions[currentQuestion].text }}</p>
            <div ng-switch on="questions[currentQuestion].type">
                <p ng-switch-when="radio">
                    <label data-ng-repeat="answer in questions[currentQuestion].answers">
                        <input name="answer[]" ng-model="questions[currentQuestion].selected" ng-value="answer.id" type="radio" />
                        {{answer.text}}
                    </label>
                </p>
                <p ng-switch-when="check">
                    <label data-ng-repeat="answer in questions[currentQuestion].answers">
                        <input name="answer[]" ng-checked="questions[currentQuestion].selected.indexOf(answer.id) > -1" ng-click="toggleCheckAnswer(questions[currentQuestion], answer.id)" ng-value="answer.id" type="checkbox" />
                        {{answer.text}}
                    </label>
                </p>
                <p ng-switch-when="select">
                    <label data-ng-repeat="answer in questions[currentQuestion].answers">
                        <input name="answer[]" ng-model="questions[currentQuestion].selected" ng-value="answer.id" type="radio" />
                        {{answer.text}}
                    </label>
                </p>
                <p ng-switch-when="input">
                    <label data-ng-repeat="answer in questions[currentQuestion].answers">
                        <input name="answer[]" ng-model="questions[currentQuestion].selected" ng-value="answer.id" type="radio" />
                        {{answer.text}}
                    </label>
                </p>
            </div>
            <p>{{testData}}</p>
            <ul class="pager">
                <li class="previous"><a ng-click="prev()">&larr; Назад</a></li>
                <li class="next"><a ng-click="next()">Вперед &rarr;</a></li>
            </ul>
            <ul class="pagination">
              <li ng-repeat="questionId in questions" ng-class="{'active':questions[currentQuestion].id==questionId.id,'disabled': !!questionId.selected}">
                <a ng-click="showQuestion(questionId.id)">{{ questionId.id }}</a>
              </li>
            </ul>
​
            <a class="btn btn-success" ng-click="finish()">Завершить тест</a>
        </div>
        <div class="col-lg-4 timer">
            <h4>У Вас осталось: <timer interval="1000" countdown="5000" finish-callback="callbackTimer.finished()" />{{minutes}} minute{{minutesS}}</timer></h4>
            {{ callbackTimer.status }}
        </div>
    </div>
    <pre>{{ questions | json }}</pre>
</div>
<div style="display:none" data-questions='[{"id":"1","type":"check","text":"2+2","answers":[{"id":1,"text":3},{"id":2,"text":2},{"id":3,"text":4},{"id":4,"text":5}]}, {"id":"2","type":"radio","text":"2+2","answers":[{"id":1,"text":3},{"id":2,"text":2},{"id":3,"text":4},{"id":4,"text":5}]}, {"id":"3","type":"radio","text":"2+2","answers":[{"id":1,"text":3},{"id":2,"text":2},{"id":3,"text":4},{"id":4,"text":5}]}, {"id":"4","type":"radio","text":"2+2","answers":[{"id":1,"text":3},{"id":2,"text":2},{"id":3,"text":4},{"id":4,"text":5}]}, {"id":"5","type":"radio","text":"2+2","answers":[{"id":1,"text":3},{"id":2,"text":2},{"id":3,"text":4},{"id":4,"text":5}]}, {"id":"6","type":"radio","text":"2+2","answers":[{"id":1,"text":3},{"id":2,"text":2},{"id":3,"text":4},{"id":4,"text":5}]}, {"id":"7","type":"radio","text":"2+2","answers":[{"id":1,"text":3},{"id":2,"text":2},{"id":3,"text":4},{"id":4,"text":5}]}, {"id":"8","type":"radio","text":"2+2","answers":[{"id":1,"text":3},{"id":2,"text":2},{"id":3,"text":4},{"id":4,"text":5}]}, {"id":"9","type":"radio","text":"2+2","answers":[{"id":1,"text":3},{"id":2,"text":2},{"id":3,"text":4},{"id":4,"text":5}]}, {"id":"10","type":"check","text":"2+2","answers":[{"id":1,"text":3},{"id":2,"text":2},{"id":3,"text":4},{"id":4,"text":5}]}, {"id":"11","type":"check","text":"2+2","answers":[{"id":1,"text":3},{"id":2,"text":2},{"id":3,"text":4},{"id":4,"text":5}]}, {"id":"12","type":"check","text":"2+2","answers":[{"id":1,"text":3},{"id":2,"text":2},{"id":3,"text":4},{"id":4,"text":5}]}, {"id":"13","type":"check","text":"2+2","answers":[{"id":1,"text":3},{"id":2,"text":2},{"id":3,"text":4},{"id":4,"text":5}]}, {"id":"14","type":"check","text":"2+2","answers":[{"id":1,"text":3},{"id":2,"text":2},{"id":3,"text":4},{"id":4,"text":5}]}, {"id":"15","type":"select","text":"2+2","answers":[{"id":1,"text":3},{"id":2,"text":2},{"id":3,"text":4},{"id":4,"text":5}]}, {"id":"16","type":"select","text":"2+2","answers":[{"id":1,"text":3},{"id":2,"text":2},{"id":3,"text":4},{"id":4,"text":5}]}, {"id":"17","type":"select","text":"2+2","answers":[{"id":1,"text":3},{"id":2,"text":2},{"id":3,"text":4},{"id":4,"text":5}]}, {"id":"18","type":"select","text":"2+2","answers":[{"id":1,"text":3},{"id":2,"text":2},{"id":3,"text":4},{"id":4,"text":5}]}, {"id":"19","type":"select","text":"2+2","answers":[{"id":1,"text":3},{"id":2,"text":2},{"id":3,"text":4},{"id":4,"text":5}]}, {"id":"20","type":"input","text":"2+2","answers":[{"id":1,"text":3},{"id":2,"text":2},{"id":3,"text":4},{"id":4,"text":5}]}]' id="data_questions_holder"></div>
  
  </body>
​
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers