I have created this table which can be filtered with the search box. I also want to highlight the term that was entered in the search box. So far, I got i t to work but in separate input boxes. It does the one but not the other.I guess I need to pass two ng-models to the input box in order to filter and highlight the matching term? Or Do I have to pass filter in ng-show? This fiddle http://jsfiddle.net/gion_13/ZDWdH/2/ is very similar but it works on list. I tried that example but I guess it does not work on arrays. Please excuse any newbie errors.
Here is my angular code:
<script>
var app = angular.module('myApp',['ngSanitize']).filter('highlight', function () {
return function (text, search, caseSensitive) {
if (search || angular.isNumber(search)) {
text = text.toString();
search = search.toString();
if (caseSensitive) {
return text.split(search).join('<span class="ui-match">' + search + '</span>');
} else {
return text.replace(new RegExp(search, 'gi'), '<span class="ui-match">$&</span>');
}
} else {
return text;
}
};
});
app.controller('MainCtrl',function($scope,$http) {
$scope.orderByField = 'Activity_ID';
$scope.reverseSort = false;
$scope.items=[];//removes undefined length errors
$scope.loadPeople = function() {
var httpRequest = $http({
method: 'GET',
url: 'https://url_local/time/timesheet_json.php'
}).success(function(data, status) {
$scope.items = data;
console.log($scope.items);
});
};
$scope.loadPeople();
});
</script>
<html>
<input ng-model="query" />
<input ng-model="hightlightText"/>
//Removed code to highlight specific sections
<tbody>
<tr ng-repeat="item in items | orderBy:orderByField:reverseSort" ng-show="([item] | filter:query).length">
<td ng-bind-html="item.Activity_Matrix_ID | highlight:highlightText">{{item.Activity_Matrix_ID}}</td>
<td ng-bind-html="item.Activity_ID | highlight:highlightText">{{item.Activity_ID }}</td>
<td ng-bind-html="item.Activity_Date | highlight:highlightText">{{item.Activity_Date}}</td>
<td ng-bind-html="item.Activity_Category | highlight:highlightText">{{item.Activity_Category}}</td>
<td ng-bind-html="item.Activity_Hours | highlight:highlightText">{{item.Activity_Hours}}</td>
<td ng-bind-html="item.Activity_Project | highlight:highlightText">{{item.Activity_Project}}</td>
<td ng-bind-html="item.Activity_Description | highlight:highlightText">{{item.Activity_Description}}</td>
</html>
JSON Response: [{"Activity_Matrix_ID":"163","Activity_ID":"131","Activity_Date":"2062-02-16","Activity_Category":"Maintanence","Activity_Project":"All Projects","Activity_Description":"Json data ","Activity_Hours":"2"},{"Activity_Matrix_ID":"161","Activity_ID":"129","Activity_Date":"2044-02-25","Activity_Category":"Tech Support","Activity_Project":"All Projects","Activity_Description":"Dummy dummy ","Activity_Hours":""}]
