是否有AngularJS数据更新回调？如何手动更新页面数据的变化是什么时候？ [英] Are there AngularJS data update callbacks? How do I manually update page when data changes?

问题描述

我通过AngularJS教程去了，这是pretty整洁。我还浸泡在骨干网和Ember.js（尽管不是完全熟悉，无论是），但我听说过很多赞美了AngularJS，我想看看它是否会为我工作。

I went through the AngularJS tutorial and it's pretty neat. I've also dipped into Backbone and Ember.js (though not totally familiar with either) but I've heard lots of praise over AngularJS and I want to see if it will work for me.

我有只围绕一个大的谷歌地图网站（觉得像Padmapper.com）。超过2000的汽车，是通过JSON当前加载的页面加载后，和JSON需要1-2秒即可到达。在地图上，然后用基于车位置标记填充。我有一个过滤器的形式与用户可以过滤基于许多不同的属性轿车（让我们只说颜色，气体量等），目前提交此过滤器形式的查询与再返回筛选汽车过滤器的后端。这是一个巨大的浪费时间。

I have a site that focuses around a large Google map (think of something like Padmapper.com). Over 2,000 cars that are currently loaded via JSON after page load, and that JSON takes 1-2 seconds to arrive. The map is then populated with markers based on car location. I have a filter form with which the user can filter the cars based on many different attributes (let's just say color, amount of gas, etc.) Currently submitting this filter form queries the back end with the filters which then returns the filtered cars. This is a huge waste of time.

我想上加载初始化所有的项目，然后用前端的过滤，因为他们改变的值。在AngularJS教程中，项目出现和消失，因为我在过滤器框中键入。 pretty凉爽。但我怎么处理地图标记？我如何定义一个回调函数，一旦他们来手动更新的地图标记？我需要以某种方式使用自定义指令？ （还没完全确定这是什么做的......）

I'd like to load all the items on initialization, then use the front end to filter as they change the values. In the AngularJS tutorial, items appear and disappear as I type in the filter box. Pretty cool. But how do I handle map markers? How can I define a callback function to manually update the map markers once they come in? Do I need to use custom directives somehow? (Still not totally sure what these do...)

我能想到jQuery的一个解决方案，即有车的无序列表，看它的变化，隐藏/显示标记是必要的。但我试图从jQuery的移开。任何帮助AP preciated！谢谢！

I can think of a solution in jQuery, i.e. have an unordered list of the cars, watch it for changes, and hide/show markers as necessary. But I'm trying to move away from jQuery. Any help is appreciated! Thanks!

推荐答案

在一个指令，你可以看$您的汽车名单上的改变并重新应用你的地图上的标记。我不熟悉的谷歌地图程序，但这里是一个试图说明我讲：<一href=\"http://plnkr.co/edit/d8Dn6epgnQ9UvWrMDAk8?p=$p$pview\">http://plnkr.co/edit/d8Dn6epgnQ9UvWrMDAk8?p=$p$pview

In a directive, you could $watch for a change on your list of cars and reapply the markers on your map. I am not familiar with Google Maps programming, but here's an attempt to illustrate what I talking about: http://plnkr.co/edit/d8Dn6epgnQ9UvWrMDAk8?p=preview

修改

我发现跟踪的筛选结果的一个伟大的方式：

I found a great way of keeping track of the filtered results:

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

这动态创建变量filteredcars，无需绑定输入查询change事件！

This create on the fly the variable filteredcars and no need to bind a change event on the input query!

因此​​，要回顾一下：

So to recap:

1）您可以$观察数据的变化。但不要忘了第三个参数来告诉它是一个数组。

1) You can $watch data for change. But don't forget the 3rd parameter to tell it is an array.

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

2）您可以在包含一个前pression从纳克重复即将到来的筛选结果动态创建一个变量。

2) You can create a variable on the fly containing the filtered results of an expression coming from an ng-repeat.

3）不要忘记你追加的子元素之前清空地图要素，否则，过滤元素不会出现奏效。

3) Don't forget to empty the map element before you append child elements, otherwise, the filtered elements won't appear to be working.

这篇关于是否有AngularJS数据更新回调？如何手动更新页面数据的变化是什么时候？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！