2

我浏览了 AngularJS 教程，它非常简洁。我还研究过 Backbone 和 Ember.js（尽管两者都不完全熟悉），但我听到了很多对 AngularJS 的赞誉，我想看看它是否对我有用。

我有一个专注于大型谷歌地图的网站（想想像 Padmapper.com 之类的东西）。超过 2,000 辆汽车目前在页面加载后通过 JSON 加载，而 JSON 需要 1-2 秒才能到达。然后根据汽车位置在地图上填充标记。我有一个过滤器表单，用户可以使用它根据许多不同的属性（比如颜色、汽油量等）过滤汽车。当前提交此过滤器表单用过滤器查询后端，然后返回过滤后的汽车。这是对时间的巨大浪费。

我想在初始化时加载所有项目，然后在它们更改值时使用前端进行过滤。在 AngularJS 教程中，当我在过滤器框中键入时，项目会出现和消失。很酷。但是如何处理地图标记？如何定义回调函数以在地图标记进入后手动更新它们？我是否需要以某种方式使用自定义指令？（仍然不完全确定这些是做什么的......）

我可以在 jQuery 中想到一个解决方案，即有一个无序列表的汽车，观察它的变化，并在必要时隐藏/显示标记。但我正试图远离 jQuery。任何帮助表示赞赏！谢谢！

4

1 回答 1

7

在指令中，您可以 $watch 观察汽车列表的变化并重新应用地图上的标记。我不熟悉谷歌地图编程，但这里试图说明我在说什么：http ://plnkr.co/edit/d8Dn6epgnQ9UvWrMDAk8?p=preview

编辑：

我找到了一种跟踪过滤结果的好方法：

<tr ng-repeat="item in (filteredcars = (cars | filter: query))">

这会即时创建变量filteredcars，无需在输入查询上绑定更改事件！

回顾一下：

1）您可以 $watch 数据以进行更改。但是不要忘记第三个参数告诉它是一个数组。

scope.$watch('myvar', function(newval, oldval) {...}, true);

2) 您可以动态创建一个变量，其中包含来自 ng-repeat 的表达式的过滤结果。

3) 不要忘记在添加子元素之前清空 map 元素，否则，过滤后的元素将无法正常工作。

于 2013-04-14T17:11:48.500 回答