HTML:
<ul id="listONE">
<li class="{{isSel}}" ng-repeat="person in people" ng-click="selPersonToChange(this)">{{person.name +" - "+ person.city}}</li>
</ul>
A snippet from my script.js using AngularJS (1.3.1):
mymod.controller("maincontroller", function($scope){
$scope.people = [
{ name: "name1", city: "city1" },
{ name: "name2", city: "city2" },
{ name: "name3", city: "city3" }
];
$scope.oldIndex = 0;
$scope.oldPerson = 0;
$scope.selPersonToChange = function(){
$scope.personToChange.person = this.person;
$scope.personToChange.index = this.$index;
lis = document.getElementById("listONE").getElementsByTagName("li");//this line is causing an error
for(i=0; i<lis.length; i++){ lis[i].className = ""; }
lis[this.$index].className = "selected";
return true;
}
Jasmine TDD test case:
Jasmine tdd.js:
describe("myApp", function(){
beforeEach(module("mymod"));
describe("maincontroller", function(){
var scope;
var ctrl;
var els;
beforeEach(inject(function($rootScope, $controller, $compile){
scope = $rootScope.$new();
ctrl = $controller("maincontroller", {$scope:scope});
els = $compile('<ul id="listONE"><li class="{{isSel}}" ng-repeat="person in people" ng-click="selPersonToChange(this)">{{person.name +" - "+ person.city}}</li></ul>')(scope);
scope.$digest();
console.log(els.html());
}));
it("Is ul #listONE null or undefined?", function(){
expect(scope.selPersonToChange()).toEqual(true);
});
});
});
The issue lies with the line "document.getElementById('listONE')", which indicates that "listONE" does not exist.