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>

当点击其中一个元素时会发生什么，它会向所单击的元素添加类clicked，并从所有其他按钮输入中删除clicked类。

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

无论如何仍然使用ng-focus和ng-blur，就像我在上面使用的那样，但是即使单击页面上的其他元素，也会点击具有clicked类的元素？< / p>

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

最初的问题是选择一个按钮而只选择该按钮来保持clicked课程。

现在问题是，如果页面上选择了其他任何内容，该元素将保留该被点击的类。

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类，而不是信任焦点/模糊。

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

AngularJS：如果点击其他元素（使用ng-focus / ng-blur），如何不失去对元素的关注？

1 个答案: