angular.js is a powerful tool for handling complex client-side JavaScript in web applications, but I'm also considering using it for simpler tasks.
For instance, let's say I have a list with some items:
<ul>
<li data-id="1">Foo</li>
<li data-id="2">Bar</li>
</ul>
Now, I want to add buttons to the HTML that can filter and/or sort the list based on user input, which should be straightforward.
Is there a way to extract data from existing HTML elements to utilize them with angular.js? The data needs to be in the HTML so that search engines can access it as well.
Edit for clarity:
The goal is to push the data from the ul list into a model within the controller that manages the list. (
[{id:1, text:"Foo"}, {id:2, text:"Bar"}]When more objects are added to the model, they should be displayed in the list.
Applying a filter to the model should then automatically filter the
li elements.
An ideal scenario would look something like this:
<div ng-model="data">
<ul ng-repeat="object in data | filter:filterCriteria">
<li data-id="1">Foo</li>
<li data-id="2">Bar</li>
<li data-id="{{object.id}}">{{object.text}}</li>
</ul>
</div>