是否有AngularJS数据更新回调?数据更改时如何手动更新页面?

时间:2013-04-14 16:32:29

标签: javascript angularjs

我浏览了AngularJS教程,它非常整洁。我也考虑过Backbone和Ember.js(虽然不完全熟悉)但我听到很多人赞扬AngularJS,我想知道它是否对我有用。

我有一个专注于大型Google地图的网站(想想像Padmapper.com这样的内容)。目前在页面加载后通过JSON加载的2,000多辆汽车,JSON需要1-2秒才能到达。然后根据汽车位置使用标记填充地图。我有一个过滤器表单,用户可以根据许多不同的属性过滤汽车(让我们只说颜色,汽油量等)。目前提交此过滤器表单会在后端查询过滤器,然后返回过滤后的汽车。这是浪费大量时间。

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

我可以想到jQuery中的一个解决方案,即有一个无序的汽车列表,观察它的变化,并根据需要隐藏/显示标记。但我正试图摆脱jQuery。任何帮助表示赞赏!谢谢!

1 个答案:

答案 0 :(得分:7)

在指令中,您可以监视汽车列表中的更改并重新应用地图上的标记。我不熟悉谷歌地图编程,但这里试图说明我在谈论的内容:http://plnkr.co/edit/d8Dn6epgnQ9UvWrMDAk8?p=preview

修改

我找到了跟踪过滤结果的好方法:

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

这可以动态创建变量filteredcars,无需在输入查询中绑定更改事件!

所以回顾一下:

1)您可以观看数据以进行更改。但是不要忘记第三个参数来告诉它是一个数组。

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

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

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