Question

我有一个Angular应用程序，它采用大型复杂数据集，并允许用户使用选择列表对其进行过滤。过滤数据后，Google地图对象会更新，以显示已过滤项目的关联位置。

我正在尝试使用它，以便当用户点击地图图钉时，过滤的数据列表仅使用与该位置相关联的项目进行更新。

代码的一些片段：

$scope.showInfoWindow = function(event, site) {

  var infowindow = new google.maps.InfoWindow();
  var center = new google.maps.LatLng(site.Latitude, site.Longitude);

  infowindow.setContent(
    '<h3>' + site.SiteName + '</h3>' + '<p>' + site.Address1 + '<br/>' + site.Address2 + '<br/>' + site.City + ', ' + site.State + ' ' + site.ZipCode + '</p>');

  infowindow.setPosition(center);
  infowindow.open($scope.map);

  $scope.findSelectedLocations(site.SiteName);

};

$scope.findSelectedLocations = function(SiteName) {

    $scope.filteredData.forEach(function(itemElement, itemIndex) {
      itemElement.Locations.forEach(function(locationElement, locationIndex) {
        locationElement.Sites.forEach(function(siteElement, siteIndex) {
          if (siteElement.SiteName == SiteName) {
            console.log('match!');
            console.log('itemIndex: ' + itemIndex);
            console.table(itemElement);

            $scope.$apply(function() {

              $scope.filteredData == itemElement;

            });

            return false;
          }
        });
      });
    });

<div class="trials-item-outer-wrapper">

  <div class="trials-item-wrapper" du-scroll-container>

    <!-- start of row -->

    <div class="trials-item {{class}}" ng-repeat="data in (filteredData = (dataObject | byCountry : selectRegion | byRegion : selectState | byCity : selectCity | filterBy:['Phase']: selectPhase | filterBy:['Compound']: selectCompound | filterBy:['TherapeuticArea', 'TherapeuticArea_2',]: selectTherapy : 'strict' | unique: 'Id' | orderBy:'Phase' : reverse)) track by $index "
    ng-class="{'open':$index == selectedRow}" id="anchor-{{$index}}">

      <div class="trials-item-cell-wrapper">

        <div class="trials-item-cell">
          <img ng-click="toggleOpen($index, data.Compound,data.Number)" ng-src="assets/img/phase{{ data.Phase}}.png" width="54" height="61" alt="Phase {{ data.Phase}}" class="trials-item-phase-icon">
        </div>
        <div class="trials-item-cell"><a ng-click="toggleOpen($index, data.Compound,data.Number)"><span class="compound">{{ data.Compound }}</span><br/>{{ data.Compound_2 }}</a>
        </div>
        <div class="trials-item-cell">
          <a href="" ng-click="toggleOpen($index, data.Compound,data.Number)">
            <p class="trial-title">{{ data.TitleShort }}</p>
            <p>{{ data.Number }} {{ data.Status }}</p>
          </a>
        </div>
        <div class="trials-item-cell">
          <a href="" ng-click="toggleOpen($index, data.Compound,data.Number)"> 
						{{ data.TherapeuticArea }}<span ng-if="data.TherapeuticArea_2">, {{ data.TherapeuticArea_2 }}</span>
					</a>	
        </div>

        <div class="trials-item-cell location-cell">

          <span ng-if="data.Disclaimer">
						<p>{{data.Disclaimer}}</p></span>
        </div>

        <div class="trials-item-cell cart-actions">

          <div ng-if="!isInCart(data.Id)" class="add-to-cart">
            <a href="" ng-click="addToCartModalOpen($index, data, data.Id)">
              <img src="assets/img/cart-add.png" width="73" height="65" alt="Cart Add">
              <span>Add to Cart</span>
            </a>
          </div>


          <div ng-if="isInCart(data.Id)" class="remove-from-cart">
            <a href="" ng-click="removeFromCart(data.Id)">
              <img src="assets/img/cart-added.png" width="73" height="65" alt="Cart Add">
              <span>Remove from Cart</span>
            </a>
          </div>

        </div>
        <div class="trials-item-cell">
          <a ng-click="toggleOpen($index, data.Compound,data.Number)">
            <p class="more-text"></p>
            <div class="more glyphicon"></div>
          </a>
        </div>

      </div>
      <!-- trials-item-cell-wrapper -->

      <div class="trials-tabs" ng-include="data.Url"></div>

    </div>
    <!-- end of ng-repeat -->

因此视图使用$ scope.filteredData obj来显示已过滤数据的列表。在$ scope.showInfoWindow中，我正在显示用户点击的地图引脚的信息窗口。然后，我将'site.SiteName'值传递给$ scope.findSelectedLocations方法，以循环访问$ scope.filteredData对象，以查找与该位置的任何匹配项。这部分工作正常。我可以控制数据并查看itemElement在点击地图引脚时确实显示了正确的数据（通过$ scope.showInfoWindow（））。

当我遇到问题时，将更新后的数据恢复到视图中。

在$ scope.findSelectedLocations中，我使用itemElement中的更新项更新$ scope.filteredData，但显示$ scope.filteredData的视图未更新。正如你在下面看到的那样，我尝试在$ scope中包装该赋值。$ apply，但这也不起作用。

Answer 1

不需要apply()，当需要在摘要周期中明确呈现Angular的上下文时，需要这样做。

可能有一个错字：

而不是：

$scope.filteredData == itemElement;

使用：

$scope.filteredData = itemElement;

现在试试。

Angular具有双向数据绑定。因此，无论何时模型更新，都会自动呈现视图。什么都不需要明确地完成。如果我们想根据某些变化检测更新视图/逻辑，我们必须有一个观察者。

事件发生时在视图中更新数据

1 个答案: