javascript - 如何使用 javascript 填写 ng-model 查询以过滤数据？

Question

我使用 AngularJS 将数据存储在 JSON 中，并希望过滤显示在页面项目上的数据。每个项目都包含国家代码作为属性:

[
 {
  "id": "1",
  "code": "us"
 },
 {
  "id": "2",
  "code": "ca"
 }
]    

我想使用 Jquery VMap 来过滤项目。当我点击区域时，项目列表应该被过滤。当我使用简单的“输入”字段时，列表会被过滤。但是当我使用以下代码时，当我点击县时执行，没有任何反应:

onRegionClick: function(element, code, region)
 {
  document.getElementById("query").value = code;
  function updateQuery($scope) {
   $scope.query = code;
   $scope.$digest();
  }
 }

如何让 Angular 知道“query”的变化，或者有更好的解决方案吗？ 链接到 fiddle :http://jsfiddle.net/47RLz/4/

Answer 1

试试这个:

onRegionClick: function(element, code, region)
 {
    var e = document.getElementById("query");
    var scope = $(e).scope();
    scope.$apply(function() {
        scope.query = code;
    });

 },

解释

在 Angular 中，您可以通过对 jQuery 元素调用 scope() 来检索任何元素的范围。拥有范围后，code 将分配给范围内的查询变量。

由于点击处理程序是在 Angular 上下文之外执行的，因此分配被包装在 $apply block 中以触发 $digest 循环并更新 View 。

Demo Fiddle