Question

我有一个“菜单指令”，拒绝在模型更改时更新html视图中的项目。我正在使用带有for-each语句的角度js。这是我将其删除的最小代码。

指令：

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

计时器后的预期结果：

1 
2*

您可以反映删除项目。但是改变数组中对象的内容却没有被注意到。我做错了什么？

编辑：我更新了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"。

Angularjs在模型更新后没有更新ng-repeat的视图

1 个答案: