AngularJS ng-class 表达式未正确更新
AngularJS ng-class Expression Not Updating Properly
所以我正在尝试为文本输入构建自定义自动完成下拉列表。为此，我正在监听 keydown 事件，如果它是向上或向下箭头按下，我将 $scope.arrowSelectedItem 变量设置为列表中的正确变量。 （作为旁注，所有功能都可以使用 select 从弹出的列表中选择一个项目。我想要做的就是突出显示他们用 up/down箭头）。
在标记方面，自动完成列表中的项目以 ng-repeat、ng-repeat="item in itemList" 输出。我使用的 ng-class 表达式是 ng-class="{highlighted: item === arrowSelectedItem}"。我知道 $scope.arrowSelectedItem 使用 console.log 在每次按下箭头时更新，但由于某些原因 class 没有正确更新到列表项。
我发现，在第一次按下箭头键后，如果我使文本输入框失去焦点，则会添加 class。然后，如果我在框中单击返回，将箭头移动到 select 不同的项目，单击输入框外，然后单击返回，class 将添加到新的项目中。我知道这听起来很奇怪，但这就是我发现的。
我不确定的是为什么 ng-class 表达式没有在每次按下箭头键时都被计算。有人知道为什么吗？
这里的答案是 "raw" DOM 在 angular 的内置指令之一之外触发的事件（例如通过 ng-click 等的点击事件）不会触发 $digest 循环更新。在此之前，不会更新 $scope 属性。
如果您正在使用其他框架或简单地使用 addEventListener() 监听 DOM 事件，则需要让 angular 知道任何更改，方法是使用$scope.$apply()，或者将代码包装在 $timeout().
中
如果您在事件处理程序中执行此操作，angular 将为每次按键触发新的 $digest 循环更新，并且您的新范围值将传播到视图。
所以我正在尝试为文本输入构建自定义自动完成下拉列表。为此，我正在监听 keydown 事件，如果它是向上或向下箭头按下，我将 $scope.arrowSelectedItem 变量设置为列表中的正确变量。 （作为旁注，所有功能都可以使用 select 从弹出的列表中选择一个项目。我想要做的就是突出显示他们用 up/down箭头）。
在标记方面，自动完成列表中的项目以 ng-repeat、ng-repeat="item in itemList" 输出。我使用的 ng-class 表达式是 ng-class="{highlighted: item === arrowSelectedItem}"。我知道 $scope.arrowSelectedItem 使用 console.log 在每次按下箭头时更新，但由于某些原因 class 没有正确更新到列表项。
我发现，在第一次按下箭头键后，如果我使文本输入框失去焦点，则会添加 class。然后，如果我在框中单击返回，将箭头移动到 select 不同的项目，单击输入框外，然后单击返回，class 将添加到新的项目中。我知道这听起来很奇怪，但这就是我发现的。
我不确定的是为什么 ng-class 表达式没有在每次按下箭头键时都被计算。有人知道为什么吗？
这里的答案是 "raw" DOM 在 angular 的内置指令之一之外触发的事件（例如通过 ng-click 等的点击事件）不会触发 $digest 循环更新。在此之前，不会更新 $scope 属性。
如果您正在使用其他框架或简单地使用 addEventListener() 监听 DOM 事件，则需要让 angular 知道任何更改，方法是使用$scope.$apply()，或者将代码包装在 $timeout().
中如果您在事件处理程序中执行此操作，angular 将为每次按键触发新的 $digest 循环更新，并且您的新范围值将传播到视图。