Question

我有一个网页，它使用单选按钮标签作为按钮，输入隐藏

<li ng-repeat="amount in amounts | orderBy: amount" ng-mouseenter="$parent.hoverPrompt = $parent.amounts[$index].donationPrompt" ng-mouseleave="$parent.hoverPrompt = null">
  <input type="radio" name="amount_{{amount.suggestedAmount}}" id="donate_{{amount.suggestedAmount}}" ng-value="{{amount.suggestedAmount}}" ng-model="donate.amount" string-to-number />
  <label class="as-button" for="donate_{{amount.suggestedAmount}}">${{amount.suggestedAmount}}</label>
</li>

我希望我们的标签在它们或其相关的隐藏输入被标记时可以突出显示。

我找到了一个准备好的https://www.example.com但更愿意以角度进行。

Answer 1

我找到了一个仅限CSS的解决方案，因为在我的情况下，标签出现在输入之后：

.amounts input:focus + label {box-shadow: 0 0 2px $brand-primary;}

<ul class="list-group amounts">
  <li ng-repeat="amount in amounts | orderBy: amount" ng-mouseenter="$parent.hoverPrompt = $parent.amounts[$index].donationPrompt" ng-mouseleave="$parent.hoverPrompt = null">
    <input type="radio" name="amount_{{amount.suggestedAmount}}" id="donate_{{amount.suggestedAmount}}" ng-value="{{amount.suggestedAmount}}" ng-model="donate.amount" string-to-number ng-focus="$parent.hoverPrompt = $parent.amounts[$index].donationPrompt" ng-blur="$parent.hoverPrompt = null"/>
    <label class="as-button" for="donate_{{amount.suggestedAmount}}">${{amount.suggestedAmount}}</label>
  </li>

Answer 2

这是一个plunkr，它使用ng-focus在关注相关输入时将突出显示应用于标签。 ng-blur用于在元素失去焦点时删除样式。

我只是在聚焦元素时将名为'highlight'的范围变量设置为true，而在元素失去焦点时设置为false（模糊）。

Ng-class用于根据我的'highlight'变量有条件地应用css。

HTML

 <div ng-repeat="data in posts">
  <label  ng-class="highlight == true ? 'highlight' : '' ">{{data.name}}</label>
  <input type="radio" ng-focus="highlight = true" ng-blur="highlight =false" ng-class="highlight == true ? 'highlight' : '' " />
</div>

CSS

.highlight { background-color: yellow;}

ng-focus不会;但是，在标签元素上工作。它仅限于输入。

Answer 3

在标签中，您可以使用

<label class="as-button" ng-class="{'active': donate.amount == amount.suggestedAmount}"for="donate_{{amount.suggestedAmount}}">${{amount.suggestedAmount}}</label>

使用ng-class =＆＃34; {＆＃39; active＆＃39 ;: boolean}是新旧angularjs版本的一致工作，因为它基于html类，而且它不会从另一个元素中窃取焦点如果使用“使用”选项卡或单击另一个选项卡，则会丢失焦点效果。另外，我建议使用按钮组作为那些单选按钮：

<div class="btn-group" data-toogle="buttons-checkbox">
       <label ng-repeat="type in petTypes" class="btn btn-primary" ng-class="{'active': pet.type==type}" ng-click="setPetType(pet,type)">
       <input type="radio" name="{{pet.id}}" value="{{type}}" class="sr-only" ng-checked="pet.type==type" required>{{type}}
       </label>
</div>

这来自我的宠物控制应用程序的代码，它在点击按钮时生成新的宠物，这部分是关于单选按钮，它工作得很好。另一个注意事项是名称是控制输入属于哪个组。

输入以角度聚焦时的聚焦标签

3 个答案: