范围变量更新，但不更新视图

scope variable update but not the view

本文关键字：更新 新视图 变量 范围      更新时间：2023-09-26

我有以下函数，它构建了一个田径项目和类别的列表。我必须显示事件/类组合是否为"官方"，这是通过从后端收集官方组合列表来完成的，如果返回的组合与要显示的组合匹配，则设置值event.isOfficial=true。

competitionsService.checkIsOfficial(selectedclasses, selectedevents)
  .then(function (data) {
    //Here we are building the class / event list and checking if the event is official or not
    $scope.currentEditItem.classes.forEach(function (cls) {
      cls.events = selectedEvents;
      cls.events.forEach(function (eventtype) {
        eventtype.forEach(function (event) {
        event.isOfficial = false; // By default no class / events combinations are official
        data.forEach(function (item) {
          if (item.idClass == cls.id && item.idEvent == event.id) {
            event.isOfficial = true;
          }
        });
        if ($scope.currentEditItem.classevent[cls.id][event.id].selected) {
          $scope.addTag(event, cls.eventtags[event.intType],
          $scope.currentEditItem.events[event.intType], event.intType, "classevents_" + cls.id + "_", false); 
          // Update the event tags
          $scope.currentEditItem.classevent[cls.id][event.id].selected = !$scope.currentEditItem.classevent[cls.id][event.id].selected;
        }
      });
    });
    $scope.currentEditItem.classesbysex[cls.intSex].push(cls);
  });
});

相关的html如下所示：

  <ul class="inline">
    <li ng-repeat="event in cls.events[eventtype.intType]" class="titlecell">
        <div ng-click="setChecked(cls, event, cls.eventtags[eventtype.intType],currentEditItem.events[eventtype.intType],eventtype,'classevents_'+cls.id+'_')"
             class="checkbox-div" name='event{{event.id}}'
             id='classevents_{{cls.id}}_{{event.id}}'>
            <i ng-class="{'icon-ok': currentEditItem.classevent[cls.id][event.id].selected}" class="iconpos"></i>
        </div>
        <div class="titlecell" ng-class="{warn:!event.isOfficial}">{{ event.idEvent }}: {{ event.strName }} - {{ event.isOfficial }} </div>
    </li>
</ul>

问题是，即使event.isOfficial在作用域中设置为true（当然这已经在调试器中进行了检查），它也不会在视图中更新。

注意事项：页面在调用competitionsService.checkIsOfficial之前加载。这将转到后端，并在返回promise后更新DOM。但是，来自此回调的其余数据将正确显示。

CCD_ 3抛出一个CCD_。

event.isOfficial = true上面三行，我设置了event.isOfficial = false。这反映在视图中。测试{{ event.isOfficial }}总是显示false。

我今天做了几个小时的头发，现在已经所剩无几了。任何关于我可能做错了什么的想法都将不胜感激。

谢谢！

更新：

花了一段时间才获得正确的数据，但我有一个Plunk在工作：http://plnkr.co/edit/pBoM4BHlx4h7Cw2jEIfG?p=preview

据我所知，问题在于您重复更改了相同事件的isOfficial标志，而不是对独立副本执行操作。这可以通过在正确的位置应用CCD_ 10来容易地补救。

作为额外的奖励，我删除了一个嵌套循环，用一个简单的映射替换它。

在plunker中，$scope对象上似乎缺少一个函数，所以我将其注释掉了。

competitionsService.checkIsOfficial(selectedclasses, selectedevents)
    .then(function (data) {
        /// prevent a nested forEach-loop by using a map.
        var map = {};
        data.forEach(function (item) {
            map[ [item.idClass,item.idEvent] ] = true;
        });
        //Here we are building the class / event list and checking if the event is official or not
        $scope.currentEditItem.classes.forEach(function (cls) {
            /// make a deep copy so the event-objects are independant.
            cls.events = angular.copy(selectedEvents);
            cls.events.forEach(function (eventtype) {
                eventtype.forEach(function (event) {
                    event.isOfficial = map[ [cls.id, event.id] ] !== undefined;
                    if ($scope.currentEditItem.classevent[cls.id][event.id].selected) {
                        /// !! $scope.addTag does not exist in the plunker example.
                        /// $scope.addTag(event, cls.eventtags[event.intType], $scope.currentEditItem.events[event.intType], event.intType, "classevents_" + cls.id + "_", false); 
                        // Update the event tags
                        $scope.currentEditItem.classevent[cls.id][event.id].selected = !$scope.currentEditItem.classevent[cls.id][event.id].selected;
                    }
                });
            });
            $scope.currentEditItem.classesbysex[cls.intSex].push(cls);
        });
    });
相关文章：