Recently delved into the world of Angular and I've hit a roadblock.
I'm struggling to grasp how Angular accesses data in the DOM.
In all the examples I've come across, data is initialized within a controller:
phonecatApp.controller('PhoneListCtrl', function ($scope) {
$scope.phones = [
{'name': 'Nexus S',
'snippet': 'Fast just got faster with Nexus S.'},
{'name': 'Motorola XOOM™ with Wi-Fi',
'snippet': 'The Next, Next Generation tablet.'},
{'name': 'MOTOROLA XOOM™',
'snippet': 'The Next, Next Generation tablet.'}
];
});
But what if I have a table that's already populated from an external source?
<table>
<tr>
<td> John </td>
<td> Johnson </td>
<td> 30 </td>
</tr>
<tr>
<td> David </td>
<td> Davidson </td>
<td> 23 </td>
</tr>
...
</table>
Let's say I want to perform some action on those table rows (like filter some of them) when a user clicks a certain button. How do I access all the data in the table within my controller?
I could use a filter on a repeater as shown in the tutorial:
<li ng-repeat="phone in phones | filter:query">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
However, unlike the tutorial where data is loaded from a controller, my data is already present in the table. I just need to fetch it for manipulation. Any suggestions?