angularjs – ng-class在执行ng-click调用函数后应该更新

发布时间：2020-12-17 07:00:21 所属栏目：安全来源：网络整理

导读：我在AngularJS中遇到了ng-class的问题 – 它没有正确更新. 视图： div class="cal-day" ng-repeat="day in schedule" ... div class="entry" ng-click="entryDetails(entry)" ng-repeat="entry in day.blockGrid" ng-class="{'selected': isSelected(entry),

我在AngularJS中遇到了ng-class的问题 – 它没有正确更新.

视图：

<div class="cal-day" ng-repeat="day in schedule">
    ...
    <div class="entry" ng-click="entryDetails(entry)" ng-repeat="entry in day.blockGrid"
     ng-class="{'selected': isSelected(entry),'bg-{{entry.color}}': entry,'bg-empty': !entry}">
         {{isSelected(entry)}}
         ...
    </div>
</div>

JS：

$scope.entryDetails = function(entry) {
    $scope.entryForDetails = entry;
};

$scope.isSelected = function(entry) {
    return $scope.entryForDetails === entry;
};

选择的CSS类很好 – 当我用ng-class中的true替换isSelected(entry)时,类被正确应用.
与isSelected()函数相同 – 它根据是否选中该项正确打印true或false.
即使两个元素都有效,它们也会以某种方式拒绝协同工作,并且当isSelected(entry)返回true时,div类不会更新为选中状态.

编辑：

模型存储在白天

{
    "date": "6.6.2013","blockGrid": [
      null,null,{
        "group": "ABCD","subjectName": "AB CD","subjectShorthand": "PW","type": "c","number": 4,"profName": "ABAB","date": "2013-06-05T22:00:00.000Z","venue": "329 S","timetableBlock": 7,"color": 16,"_id": "51c3a442eb2e46a7220000e2"
      }
    ]
  }

如您所见,它是一个包含7个元素的数组,这些元素为null或包含一个入口对象.

我忘了提到我的观点的张贴部分在另一个ng-repeat中.现在查看上面的查看代码段以反映这一点.

解决方法

正如你设置的那样,Ng-class想要评估一个布尔表达式,它是你对象中的第一个表达式所做的.但是,接下来的两个表达式试图评估条目对象,而不是isSelected(entry)的结果,它返回true / false.

所以要纠正：

ng-class="{'selected': isSelected(entry),'bg':isSelected(entry),'bg-empty':!isSelected(entry)}"

也就是说,除非你正在尝试别的东西.另请注意,我删除了bg – {{entry.color}}.我不知道如何评估ng-class中的范围属性,或者甚至是否可能.

Here is the working plunker demo.这可能不是你想要的,但它至少可以帮助你排除故障.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!