AngularJS：如果单击其他元素（使用ng-focus / ng-blur），如何不失焦点？ [英] AngularJS: How to not lose focus on element if other elements are clicked (using ng-focus/ng-blur)?

问题描述

  > < div ng-repeat =h in myObjectArray> 
< div> 
< input ng-class ={clicked：clickedFlag1}ng-focus =clickedFlag1 = trueng-blur =clickedFlag1 = falsetype =buttonid =1value =1 ng-click =btnSelected（1）/> 
< / div> 
< div> 
< input ng-class ={clicked：clickedFlag2}ng-focus =clickedFlag2 = trueng-blur =clickedFlag2 = falsetype =buttonid =2value =2 ng-click =btnSelected（2）/> 
< / div> 
< / div> 
  

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

问题是，如果我点击页面其他部分的任何其他元素，我以前点击的元素不再有焦点，并得到它的点击类删除。 p>

是否仍然使用 ng-focus 和 ng-blur 像我在上面使用，但有点击的元素有点击类，即使当页面上的其他元素被点击时

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

最初的问题是选择一个按钮，只有那个按钮按住点击类。

现在问题在于如果选择了其他选项

解决方案

现在，当我知道您要做什么时，这是我的建议。 b
$ b

 < div ng-repeat =myObjectArray中的h> 
< div> 
< input ng-class ={clicked：clickedFlag1 == $ index}ng-click =btnSelected（1，$ index）type =buttonng-attr-id =btn1 _ {{ $ index}}value =1/> 
< / div> 
< div> 
< input ng-class ={clicked：clickedFlag2 == $ index}ng-click =btnSelected（2，$ index）type =buttonng-attr-id =btn2 _ {{ $ index}}value =2/> 
< / div> 
< / div> 
  

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

pre $ $ scope.btnSelected = function（btnNumber，btnIndex）{
if（btnNumber == 1）{
$ scope.clickedFlag1 = btnIndex;
} else {
$ scope.clickedFlag2 = btnIndex;
}
// ....其余的代码
}

请注意， btnNumber 是一个组成名称，用您在函数中使用的当前参数名替换它。

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

这将允许 ngClass 在基于当前索引的按钮上设置点击类，而不是相信焦点/模糊。

仅供参考 id 的多个元素是一个不好的习惯（你在 ngRepeat ），您可以将当前的 id 更改为 ng-attr-id =btn1 _ {{$ index }} 为每个组的第一个按钮，第二个为 ng-attr-id =btn2 _ {{$ index}}按钮。不要忘记删除当前的 id 属性。

I've got some elements inside an ng-repeat loop that have these attributes:

<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>

What happens is when one of the elements is clicked, it add class clicked to the clicked element, and removes the clicked class from all other button inputs.

The problem is, if I click on any other element on the rest of the page, the element I previously clicked no longer has focus and gets it's clicked class removed.

Is there anyway to still use ng-focus and ng-blur like I am using above but have the element that's clicked to have clicked class even when other elements on the page are clicked?

To explain: Previously before going about this solution, I was locating elements via querySelector, adding and removing classes that way. Someone pointed out that using DOM through AngularJS this way wasn't efficient, so I went with this way.

The problem initially was to select one button and ONLY that button to hold a clicked class.

Now the problem is for that element to hold that clicked class if anything else is selected on the page.

解决方案

Now when I know what you're trying to do, this is my suggestion

<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>

Now, on your controller, change the btnSelected function and allow it to accept the second parameter:

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

Note that btnNumber is a made up name, replace it with the current parameter name you're using in your function.

When you're inside ngRepeat you have $index that reference to the current index in the loop, so when you click on the button, you set clickFlag1 = $index when you click on the first button (from within the controller) on every button groups OR clickFlag2 = $index for the second button.

This will allow the ngClass to set the click class on the button based on the current index, instead of trusting the focus/blur.

FYI - Having multiple elements with the same id is a bad practice (you're inside ngRepeat), you can change the current id to ng-attr-id="btn1_{{ $index }}" for the first button on each group, and ng-attr-id="btn2_{{ $index }}" for the second button. Don't forget to remove the current id attributes.

这篇关于AngularJS：如果单击其他元素（使用ng-focus / ng-blur），如何不失焦点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！