Question

我有以下html：

<div class="icon fluid select" ng-init="focused = false">
   <i  ng-class="{'large svg guests icon':rooms==2, 'large svg guest icon':rooms==1,'active':focused==true}"></i>
    <label ng-click="closeCalendar();">
   <select ng-model="rooms" name="rooms"   class="fluid" name="rooms" focus-parent selecter required>
     <option value="1" ng-focus="focused = true">Einzelzimmer</option>
     <option value="2" ng-focus="focused = true">Doppelzimmer</option>
    </select>
 </label>

我初始化了一个初始值为false的模型，我想在选择框的选项被聚焦时或者当选择框被聚焦时改变它的值，我尝试了上面的但它没有用，我怎么能解决它，这可能吗？

Answer 1

<option>元素无法获得焦点，只有<select>元素才能获得焦点所以你需要把监听器放在<select>上（别忘了把blur监听器设置为focused为假）：

<select ng-model="rooms" 
        ng-focus="focused=true" 
        ng-blur="focused=false">

另请参阅此 short demo 。

Answer 2

我认为这里的问题是你似乎试图使用模糊和聚焦而不是使用内置于角度的绑定。所以，你正在寻找的东西基本上如下：

<i class="icon"  ng-class="{'gbp':rooms=='2', 'usd':rooms=='1'}"></i>
<select ng-model="rooms" name="rooms" class="fluid">
 <option value="1">Dollars</option>
 <option value="2">Pounds</option>
</select>

我更改了变量名称，类和图标，使其变得有意义，我可以轻松找到一些图标，但重点是相同的。选择ng-model意味着一旦选定的值发生变化，类就会在＆＃34; usd＆＃34;之间发生变化。和＆＃34; gbp＆＃34; （取决于他们选择了什么）。其余的只是直接的CSS来显示正确的图标。

看到PLUNKER： http://plnkr.co/edit/6cgHFirI2jxXIAGJ83YW?p=preview

修改

为了根据焦点和模糊更改整个div的类，您可以在选择中使用ng-focus和ng-blur，如下所示：

<select ng-model="rooms" name="rooms" class="fluid" ng-focus="highlight=true" ng-blur="highlight=false">

ng-focus和ng-blur都会自动对范围运行应用，因此您可以使用简单的ng-class指令更改类。以下面的例子为例：

<div ng-class="{'highlight':highlight==true,'normal':highlight==false}">

您可以在此处查看原始plunker的这些更新：http://plnkr.co/edit/6cgHFirI2jxXIAGJ83YW?p=preview

祝你好运！

在angularJS中更改ng-focus的类

2 个答案: