AngularJS: 如何在单击其他元素时不失去对元素的关注（使用 ng-focus/ng-blur）？

Question

我在 ng-repeat 循环中有一些元素具有这些属性：

<div ng-repeat="h in myObjectArray">
    <div>
        <input ng-class="{ clicked: clickedFlag1 }" ng-focus="clickedFlag1 = true" ng-blur="clickedFlag1 = false" type="button" id="1" value="1" ng-click="btnSelected(1)" />
    </div>
    <div>
        <input ng-class="{ clicked: clickedFlag2 }" ng-focus="clickedFlag2 = true" ng-blur="clickedFlag2 = false" type="button" id="2" value="2" ng-click="btnSelected(2)" />
    </div>
</div>

当其中一个元素被点击时，会发生什么情况，它将 class clicked 添加到被点击的元素，并从所有其他按钮中删除 clicked class输入。

问题是，如果我单击页面其余部分的任何其他元素，我之前单击的元素将不再具有焦点，并且 clicked class 将其删除。

是否仍然像我在上面使用的那样使用 ng-focus 和 ng-blur，但是即使其他元素打开，单击的元素也有 clicked class页面被点击了吗？

解释一下：在开始这个解决方案之前，我通过 querySelector 定位元素，以这种方式添加和删除 classes。有人指出使用 DOM 到 AngularJS 这种方式效率不高，所以我采用了这种方式。

最初的问题是 select 一个按钮，并且只有那个按钮可以容纳 clicked class。

现在的问题是，如果页面上 select 编辑了其他任何内容，该元素将保留单击的 class。

Answer 1

现在，当我知道你想要做什么时，这就是我的建议

<div ng-repeat="h in myObjectArray">
    <div>
        <input ng-class="{ clicked: clickedFlag1 == $index }" ng-click="btnSelected(1, $index)" type="button" ng-attr-id="btn1_{{ $index }}" value="1" />
    </div>
    <div>
        <input ng-class="{ clicked: clickedFlag2 == $index }" ng-click="btnSelected(2, $index)" type="button" ng-attr-id="btn2_{{ $index }}" value="2" />
    </div>
</div>

现在，在您的控制器上，更改 btnSelected 函数并允许它接受第二个参数：

$scope.btnSelected = function(btnNumber, btnIndex) {
    if( btnNumber == 1 ) {
        $scope.clickedFlag1  = btnIndex;
    } else {
        $scope.clickedFlag2  = btnIndex;
    }
    // .... rest of your code
}

请注意，btnNumber 是虚构的名称，请将其替换为您在函数中使用的当前参数名称。

当你在 ngRepeat 里面时，你有 $index 对循环中当前索引的引用，所以当你点击按钮时，你在点击时设置 clickFlag1 = $index在每个按钮组的第一个按钮上（从控制器内）或 clickFlag2 = $index 第二个按钮。

这将允许 ngClass 根据当前索引在按钮上设置 click class，而不是信任 focus/blur。

仅供参考 - 让多个元素具有相同的 id 是一种不好的做法（你在 ngRepeat 中），你可以将当前的 id 更改为 ng-attr-id="btn1_{{ $index }}"对于每个组的第一个按钮，ng-attr-id="btn2_{{ $index }}" 对于第二个按钮。不要忘记删除当前的 id 属性。

AngularJS: 如何在单击其他元素时不失去对元素的关注（使用 ng-focus/ng-blur）？

AngularJS: How to not lose focus on element if other elements are clicked (using ng-focus/ng-blur)?

angularjs

focus

ng-class