TypeError in angularjs - css

Question

I am trying to mark some values in a list as font red color and rest default based on some condition.When I am trying to assign a boolean var for the particular data in the list I ma getting "TypeError: Cannot assign to read only property 'match' of 123;
My code s :
angular.forEach($scope.searchResults, function (value, index) {
//populate searchResults
$scope.searchResults[index].name = "ABC";
$scope.searchResults[index].linkedRecords = [];
if(//check some condition){
$scope.searchResults[index].linkedRecords[i] ="123";
$scope.searchResults[index].linkedRecords[i].match=true;
}
});
<tr data-ng-repeat="searchResult in searchResults ">
<td >
<span data-ng-repeat="source in searchResult.linkedRecords" >
<span ng-if="!source.match">{{ source }}</span>
<span ng-if="source.match" style="color: red">{{ source }}</span>
<br>
</span></td>
</tr>
Any idea how can I make this work in html? I need to set something for each item and make those items in the list appear as red.

Answer 1

You're setting the property to have a value of 123 then you are trying to access a property called 'match'.
$scope.searchResults[index].linkedRecords[i] = 123;
At this point the value of $scope.searchResults[index].linkedRecords[i] is 123.
Which means this line:
$scope.searchResults[index].linkedRecords[i].match=true;
Is equivalent to:
(123).match = true;
This won't work, because the Number type is immutable, which means you can't add or modify properties on their immediate object representation.
You may want to wrap or box your number inside an object. Then you can add other properties to that object.
$scope.searchResults[index].linkedRecords[i] = { value: 123, match: true };
Then your HTML would look something like this instead.
<span data-ng-repeat="source in searchResult.linkedRecords" >
<span ng-if="!source.match">{{ source.value }}</span>
<span ng-if="source.match" style="color: red">{{ source.value }}</span>
<br>
</span>