<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<title>Hello World.</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<script src="app.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Services -->
<script src="polls.json"></script>
<script src="uservotedd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-resource.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-sanitize.js"></script>
</head>
<body ng-app="MyApplication">
<div>
<div ui-view></div>
</div>
</body>
</html>
/* Styles go here */
[{"id":"1","question":"Hello world! 1"}, {"id":"2","question":"Hello world 2"}]
var pollidholder1 = 1;
var app = angular.module('MyApplication',['ui.router','ngResource', 'ngSanitize']);
app.run(function ($rootScope) {
$rootScope.$on('scope.stored', function (event, data) {
console.log("scope.stored", data);
});
});
app.factory('Scopes', function ($rootScope) {
var mem = {};
return {
store: function (key, value) {
mem[key] = value;
},
get: function (key) {
return mem[key];
}
};
});
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('main', {
url: '/',
views: {
// the main template will be placed here (relatively named)
'': { templateUrl:'pollsdisplay.html',
resolve: {
items: ['$http', function($http) {
return $http({
method: 'GET',
url: 'polls.json'
});
}]
},
controller: ['$scope', '$state','items', function($scope, $state ,items) {
$scope.indexToShow = 0;
$scope.items = items.data;
$scope.change = function(){
$scope.indexToShow = ($scope.indexToShow + 1) % $scope.items.length;
pollidholder1 = $scope.items[$scope.indexToShow].id;
}
}]
}
}
})
});
<div ng-repeat="item in items track by $index" ng-show="$index == indexToShow">
<p id="pollidholder" ng-bind-html="item.id">{{item.id}}</p>
<h1 id = "question"> {{ item.question}} </h1>
<p id = "psubmitbutton"><button id = "submitbutton" onclick="idchange()">Submit</button></p>
<div class="simple-button" ng-click="change()" style ="font-size: 4vw ">Next</div>
</div>
function idchange(){
alert(pollidholder1);
}