Choose an item from a carousel list
Carousel type list to choose an item.
HTML
<div ng-app="mealsApp" ng-controller="MealsCtrl">
<div ng-repeat="q in questions">
<div ng-if="question_index == $index">
<strong>{{q.name}}</strong>
<br/>
<input type="radio" name="answer" ng-value="true" ng-model="q.userAnswer" id="yes" ng-checked="q.userAnswer"/>
<label for="yes">YES</label>
<input type="radio" name="answer" ng-value="false" ng-model="q.userAnswer" id="no" checked="q.userAnswer"/>
<label for="no">NO</label>
</div>
</div>
<hr>
<button ng-click="next()">Next</button>
</div>
JavaScript
var app = angular.module('mealsApp',[]);
app.controller('MealsCtrl', function ($scope) {
$scope.questions = [{
name: 'Do you love me?',
answer:true,
userAnswer:null
}, {
name: 'Do you hate me?',
answer:true,
userAnswer:null
}, {
name: 'Are you happy?',
answer:false,
userAnswer:null
}];
$scope.question_index = 0;
$scope.question = {};
$scope.next = function () {
if ($scope.question_index >= $scope.questions.length - 1) {
$scope.question_index = 0;
} else {
$scope.question_index++;
}
console.log($scope.questions);
console.log($scope.questions.length + '/' + $scope.question_index);
};
$scope.choose = function (question) {
$scope.question = question;
}
});