AngularJS Live Example

by paperelectron

HTML

<html ng-app="HelloApp">
<body ng-controller='Derp'>
    <div ng-repeat='t in things'> <!-- and just pass "things" into it-->
        <p>{{t.text}} {{t.answer}}</p>
        <button ng-click='t.destroy()'> Destroy</button>
        <input type='text' ng-model='t.text' />
        <div ng-repeat='a in t.answers'>
            <button ng-click='t.giveanswer(a)'> {{a.v}}</button><!--its not changing the answer why would it? is the answer on scope?>-->
        </div>
    </div>
    <p>{{events}}</p>
</body>
</html>

CSS

body {
    color: red;
}

duhh
we are clobbering the scope

JavaScript

angular.module('components', [])
.factory('baseResource', function($http){
	function base(obj){
    	this.baseUrl = obj.url
        this.objectId = obj.data.id
        this.data = obj.data
        this.actionUrl = obj.url + '/' + obj.data.id
    }
    base.prototype = {
        update: function(){
        	return $http.put(this.actionUrl, this.data)
        },
    	destroy: function(){
        	return $http.delete(this.actionUrl)
        },
    	refresh: function(){
        	return $http.get(this.actionUrl)
        }
    }
    return base
})
.factory('Question', function(baseResource, $http){
    function question(obj){
    	baseResource.apply(this, arguments)
        this.text = obj.data.text;
        this.answers = obj.data.answers;
        this.answer = null;
    }
    
    Object.create(baseResource.prototype, {constructor: question})
    question.prototype.giveanswer = function(a){
        console.log('click')
        this.answer = a
    	//return http.post('/v1/game/answer', this.answer)
    }
    question.prototype.destroy = function(){
    	//it will override the parent. that'd be bad, not deleted on db
        //Right, you have to call the super method
        //There are a few helpers to make extending objects a bit easier
        //it gets harder if you are extending 2 -3 deep
        //if you want to be really really fancy...
        //baseResource.prototype.destroy.apply(this).then(function(data, status){
        //	this.text = null
        //})
        this.text = null
       
    }
	return question
})

angular.module('HelloApp', ['components'])
.controller('Derp', function($scope, Question, $http){
   $http.get('http://trivnow.paperelectron.com/v1/event')
     .success(function(data, status){
   	   $scope.events = data
     })
   var things = [
       {text: '10 <= 19', id: 1, answers: [{id:1, v: true},{id:2, v: false}]},
       {text: 'Red is better than green', id: 2, answers: [{id:1, v: true},{id:2, v: false}]}
   ]
   
   $scope.things =...