Using Angularjs, How to parse the html elements to get the data model?

Question

For example, the html page already have a list of DIV containing some profile information such as address (including geo info), phone, and etc. I want to use angularjs to read/parse this information to generate data models and use them for other purpose such as showing on the map.

I am quite new to angularjs, so not sure if this can be done easily.

The purpose of doing this is for better search engine optimization. If using a html template and using angularjs to do the bind, such data can not be indexed by the search engine.

Max · Accepted Answer · 2014-01-14 08:38:43Z

1

Use data binding in angular JS.. For eg: http://plnkr.co/edit/c6MQ0pwMkxGXXqkJ4FXl?p=preview

<!DOCTYPE html>
<html ng-app>

  <head>
    <script src="http://code.angularjs.org/1.2.8/angular.js" data-semver="1.2.8" data-require="angular.js@*"></script>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h2>Todo</h2>
<div ng-controller="TodoCtrl">
<span>{{remaining()}} of {{todos.length}} remaining</span>
[ <a href="" ng-click="archive()">archive</a> ]
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="todoText" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
</div>
  </body>

</html>

If you look into this you can see a simple example of the interaction between model and view and how the data binding takes place.

For more visit :http://angularjs.org/

And look in to their examples given below.

edited Jan 14, 2014 at 8:38

Max

13.5k16 gold badges78 silver badges105 bronze badges

answered Jan 14, 2014 at 6:45

Pranav

6663 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Robin Over a year ago

@Pranav, Thank you for your post. However, you may not understand my question well. Take the example you gave, what i want to achieve is: the list of todos should already be rendered in html and angularjs should be able to read the html and create the model from html. In your example, the todo list is in the javascript model and angularjs renders it in the html, which is not search engine friendly.

Collectives™ on Stack Overflow

Using Angularjs, How to parse the html elements to get the data model?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related