使用Angularjs,如何解析html元素以获取数据模型?

时间:2014-01-14 05:29:14

标签: javascript html angularjs

例如,html页面已经有一个DIV列表,其中包含一些配置文件信息,例如地址(包括地理信息),电话等。我想使用angularjs来读取/解析此信息以生成数据模型并使用它们用于其他目的,例如在地图上显示。

我对angularjs很新,所以不确定这是否可以轻松完成。

这样做的目的是为了更好的搜索引擎优化。如果使用html模板并使用angularjs进行绑定,则搜索引擎无法索引此类数据。

1 个答案:

答案 0 :(得分:1)

在角度JS中使用数据绑定.. 例如: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>

如果你研究这个,你可以看到一个简单的模型和视图之间的交互以及如何进行数据绑定的例子。

更多访问:http://angularjs.org/

并查看下面给出的例子。