Angular ng-repeat with Search not working when search is empty - angularjs

Question

I have the following:
<div ng-repeat="foo in foos | filter:search | orderBy:'fooName'">
<input type="checkbox" id="cb-{{$index}}" ng-click="diseaseCheckboxClick($index)"/>
<input type="hidden" id="foo-{{$index}}" value="{{foo.id}}"/>
<label id="label-{{$index}}">{{foo.fooName}}</label>
</div>
The collection of 'foos' comes from a ReST call.
A person has a collection of 'foos', and I have a function that loops over each 'foos' collection, and the job of the function is to checkmark the 'foo' or not. If the person has that particular 'foo', checkmark it.
I use the a hidden text field to hold the fooIds, and I use it for comparison.
for (var i = 0; i < $scope.person.foos.length; i++) {
var outerFooId = $scope.person.foos[i].id;
for (var j = 0; j < $scope.foos.length; j++) {
var fooElem= '#foo-' + j;
var fooIdValue = $(fooElem).val();
if (outerFooId === fooIdValue) {
var cbId= '#cb-' + j;
$(cbId).attr('checked', true);
break;
}
}
}
The only problem I have is that when I enter a search item that brings back zero results (and that works), but then when I backspace back and remove the search items that brought back no results, the function that is used to checkmark the checkboxes does not work, it is due to the call '$(fooElem).val();' in the function returns undefined.
I see the list in the page, and when i view source i see all of the fields, including the hidden text field that holds the fooId, so I do not know why the function does not 'see' it.
Note that this only occurs when I enter a search that brings back no results, then backspace over to clear out the search field.
The search and marking the checkboxes work otherwise.
Any idea why this is happening, or how I can make the function 'see' the hidden text field. I'll note that I also tried to use the 'label' element, but same result, the text of the label is undefined.

Answer 1

This will not completely solve your problem, but I have to point out that you are making the classic mistake of mixing methodologies. In Angular, you should never, EVER have any code that manipulates the DOM outside of a directive, and even then it is rarely necessary.
There are two classic clues here - you are using $() (jquery), and you are using HTML DOM id attributes. The only real use for id's in Angular is to associate labels with input elements (which you are not doing here), and even then in most cases you can get away with encasing the input inside the label instead of using the "label for" syntax.
Having said all of that, and without seeing the rest of your code, here is how you "angularize" what you are doing:
I am going to make a few assumptions (that should probably be answered by your question):
1) foos is a list of all foos. Each foo has a unique id and name.
2) a person can have some or all foos.
3) The purpose of your code is to allow someone to see which foos they have, and filter the list by name.
So first, the model:
To make things fast (avoid looping when checking each foo, foos should be indexed by id. To when you load them from your for a person, you should create a map by id:
var fooMap = {};
foreach(var i in person.foos) {
fooMap[person.foos[i].id] = person.foos[i];
}
Note that this could be simplified if person.foos is already a map by id!
You also need a few methods in your controller:
$scope.hasFoo(foo) {
return fooMap[foo.id];
}
And your template becomes:
<div ng-repeat="foo in foos | filter:search | orderBy:'fooName'">
<label>{{foo.fooName}}<input type="checkbox" ng-click="diseaseCheckboxClick(foo)" ng-checked="hasFoo(foo)"/></label>
</div>
Note no hidden input, no id's - just a template that is driven by the state of your $scope.
This will solve the immediate problem (losing foos after a search).
The last part of the puzzle is implementing your click function. Without knowing more about your actual implementation, here is the general idea (you'll have to figure the details out yourself).
$scope.diseaseCheckboxClick = function(foo) {
if(fooMap[foo.id]) {
//remove the foo from $scope.person.foos
// and update fooMap
delete fooMap[foo.id];
}
else {
//add the foo to $scope.person.foos and update fooMap
$scope.person.foos.push(foo);
fooMap[foo.id] = foo;
}
}
Hopefully this points you in the right direction. I'm inferring a lot, so I'm sure I've got a few things wrong, but the key problem you have right now is mixing jQuery with Angular.