6

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でisSelected(entry)trueに置き換えると、クラスが適切に適用されます。isSelected()関数 でも同じです。項目が選択されているかどうかに応じて、trueまたはfalseを正しく出力します。両方の要素が機能しますが、どういうわけか一緒に機能することを拒否し、 isSelected(entry)がtrueを返すときにdiv クラスが選択済みに 更新されません。

編集:

1 日に保管されたモデル

  {
    "date": "6.6.2013",
    "blockGrid": [
      null,
      null,
      null,
      null,
      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"
      }
    ]
  }

ご覧のとおり、null であるか、エントリオブジェクトを含む 7 つの要素の配列です。

ビューの投稿されたセクションが別の ng-repeat 内にあることを忘れていました。上記のビュー コード スニペットは、それを反映するように展開されています。

4

1 に答える 1