モデルが更新された後にAngularjsがng-repeatのビューを更新しない

Question

モデルが変更されたときに、HTMLビューの項目を更新することを拒否する「メニュー指示」があります。私はfor-eachステートメントで角度jを使用しています。 ここに私がそれを取り除いた最小のコードがあります。

ディレクティブ：

export function SideNavbarDirective() { 
    'ngInject'; 

    let directive = { 
     restrict: 'E', 
     templateUrl: 'app/components/sideNavbar/sideNavbar.html', 
     scope: { 
     }, 
     controller: SideNavbarController, 
     controllerAs: 'vm', 
     bindToController: true 
    }; 

    return directive; 
} 

class SideNavbarController { 
    constructor($scope, $timeout) { 
     'ngInject'; 

     $scope.myItems = [ 
      { 
       displayName:"1", 
       highlight:true, 
      }, 
      { 
       displayName: "2", 
       highlight: false, 
      }, 
      { 
       displayName: "3", 
       highlight: false, 
      }, 
     ]; 

     $timeout(() => { 
      $scope.myItems[0].highlight = false; 
      $scope.myItems[1].highlight = true; 
      $scope.myItems.length = 2; 
      $scope.$apply() 
     }, 4000); 

    } 
} 

HTML：

<div ng-repeat="item in myItems" layout="row"> 
    <div flex layout="column"> 
      <div layout="row"> 
       <span>{{item.displayName | translate}}</span><span flex=""></span><span ng-show="{{item.highlight}}">*</span> 
      </div> 
    </div> 
</div> 

初期ビュー：タイマー後

1* 
2 
3 

：

1* 
2 

タイマー後

期待される結果：反映されていることができますSE項目を削除したよう

1 
2* 

。しかし、配列内のオブジェクトの内容を変更することは、角度によって気づかれなくなります。私は間違って何をしていますか？

EDIT： ハイライトプロパティの値を代わりに出力するようにHTMLを更新しました。今

<div ng-repeat="item in myItems" layout="row"> 
    <div flex layout="column"> 
      <div layout="row"> 
       <span>{{item.displayName | translate}}</span><span flex=""></span><span>{{item.highlight}}</span> 
      </div> 
    </div> 
</div> 

私が取得： 初期ビューを：タイマー後

1 true 
2 false 
3 false 

：

1 false 
2 true 

だから、今、私は期待値を取得します。 WTF！ 問題はng-show式で行う必要がありますか？私はこれまで以上に混乱しています。

Answer 1

ng-showに必要な中括弧がないため、ng-show="item.highlight"にする必要があります。