I was trying to create a table with a filter at the top of each column.
I am unable to figure out why the Any filter is working but not the individual colum filters.
I have the code @ http://plnkr.co/edit/6ghH02
I have also tried to compile the element after setting the ng-model but it did not work.
Can anyone please help?
You can do this if you get rid of the directive and use the ng-change attribute of the input[text] like so:
function TestController ($scope) {
$scope.valueChanged = function (name, value) {
if (!$scope.search) {
$scope.search = {};
}
$scope.search[name] = value;
}
};
<body ng-controller="TestController">
<th ng-repeat="sortName in columnNames">
<input type=text ng-model="value" ng-change="valueChanged(sortName, value)">
</th>
The short version of the answer as to why your original code doesn't work is that ngRepeat creates a new scope and the value in ng-model must be an assignable variable.
As @Ryan pointed out, ng-repeat's nested scopes are the trick. An alternative to writing a controller method is to use the $parent property of the child scope to access the search property in the parent scope:
<th ng-repeat="sortName in columnNames">
<input type=text ng-model="$parent.search[sortName]"></th>
As in @Ryan's solution, a directive is not needed. However, the additional search properties needed to be created/initialized:
<div ng-init="search.name = ''; search.phone = ''"></div>
