AngularJS: Testing

by sjmcpherson

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-hide="toggleEditDamage">
<h3>Damage List</h3>           
<div id="car" class="car"><div ng-repeat="damage in damagelist">
<a href="#add_damage" ng-click="editDamage($index)" style="left:{{damage.x}}px;top:{{damage.y}}px;" class="damagedot">{{$index+1}}</a>
    </div>
    <a href="" ng-click="addDamage($event)"><img src="http://www.johnbierly.com/wp-content/uploads/reikoaylesworth.jpg"></a>
    </div>

<table class="table" style="width:395px">
<tbody>
<tr ng-repeat="damage in damagelist"><td>{{$index+1}}</td>
<td class="thumbimage"><img class="" src="http://nowa.sp39.edu.pl/wp-content/themes/keiko/images/nopic.png" id="img"></a></td>    
<td><strong>Created:</strong> {{damage.created}} by <a href="#">{{damage.creator}}</a><br/>
     <strong>Area:</strong> {{damage.area}}<br/>
     <strong>Severity:</strong> {{damage.severity}}<br/>
     <strong>Desc:</strong> Deep circluar scratch on Bumper<br/>                                                       
</td>
<td><a ng-click="editDamage($index)" href="#"><i class="icon-edit">e</i></a></td>
</tr>  
</tbody>
<tfoot><tr><td colspan="8"><a href="#">View Historical Damage</a></td></tr></tfoot></table>      
</div>    
    
<div ng-hide="!toggleEditDamage">
                              <h3>Edit Damage</h3>           
<div id="car" class="car">
    <div ng-repeat="damage in damagelist">
          <a href="#add_damage" ng-class="{undot: $index!=currentEditIndex}" ng-click="editDamage($index)" style="left:{{damage.x}}px;top:{{damage.y}}px;" class="damagedot">{{$index+1}}</a>
    </div>
        <img src="http://www.johnbierly.com/wp-content/uploads/reikoaylesworth.jpg">
        <h5><strong>Created:</strong> 05/12/13 by <a href="#">Paul Harper</a></h5>
    </div>
                                          <div class="pa-formbox pull-left">
              ...

CSS

.car{position:relative;width:165px;float:left;height:300px;margin:5px 10px 0 0;text-align:center;}
	.car img{width:100%;}
.damagedot{background-color:#ff0000;color:#fff;font-size:12px;font-weight:bold;width:20px;height:20px;margin-left:-15px;margin-top:-15px;border-radius:50%;box-shadow:0 0 5px #444;position:absolute;display:block;border:2px solid #fff;}
.damagedot.undot{opacity:0.3;}
.damagedot:hover{background-color:#ff3300;color:#fff;.opacity(100);}
.damageimage{width:110px;margin:0 2px 2px 2px;border:1px solid #ccc;}
.thumbimage img{width:50px;}

table td{border:1px solid #ccc;}

JavaScript

var MyController = function($scope, $http) {
    $scope.damagelist = [
        {
            'x':'80','y':'80','img':'','created':'05/12/13', 'creator':'Paul Harper','area':'Front Left Bumper','severity':'Light'
        },
        {
            'x':'50','y':'120','img':'','created':'02/01/14', 'creator':'John Smith','area':'Front Left Bumper','severity':'Medium'
        }
    ];
   
    
    $scope.loggedInUser = "Doug Christie";    
    
     console.log(angular.element('[ng-controller=MyController]').scope());
    
    $scope.addDamage = function(evt){
       alert(evt.offsetX);
        var obj = {'x':evt.offsetX,'y':evt.offsetY,'created':Date.now(),'creator':$scope.loggedInUser};
        $scope.damagelist.push(obj);
        $scope.editDamage($scope.damagelist.length-1);
    }
    
    $scope.editDamage = function(idx){
        //transfer to edit page
        $scope.currentEditIndex = idx;
        $scope.toggleEditDamage = true;
    }
    $scope.cancel = function(oldCopy){
        if(oldCopy){}
    }    
    
    
    $scope.clicker = function(){               

        for(var i=0; i<10000; i++){
          $scope.list.push(i);
        }
        console.log(angular.element('[ng-controller=MyController]').scope())
    }

}