ng-focus和ng-blur对select DOM不起作用

时间:2014-06-03 13:09:49

标签: angularjs

首先,我创建一个简单的示例来查看ng-focus和ng-blur是否在select上被激活,然后是我的实际代码,我找不到为什么第二个不起作用:

<div ng-app ng-init="focus=false;blur=false;active=false"> 
<select ng-focus="focus=true;blur=false;" ng-blur="blur=true;focus=false;">
    <option>sdasdsa</option>
    <option>dsadsads</option>
</select>
    <input type="text" ng-class="{ myFocus: focus, myBlur: blur }">
</div>

    <br>
         <br>
              <br>
                   <br>

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

http://jsfiddle.net/deathhell/UTn5y/2/

2 个答案:

答案 0 :(得分:2)

您无法将ng-focusng-blur用于select元素。

另一种方法是使用ng-change,这将在选择新选项时触发。

请注意,对于ng-change必需也可以ng-model

http://jsfiddle.net/5bv2Z/

答案 1 :(得分:1)

您可以对所选元素使用ng-focusng-blur。请注意:

  •  ng-focus - 仅当您单击选择元素时才会实现焦点。
  •  ng-blur - 仅当您单击除select元素之外的任何其他元素时,焦点才会丢失。
  • 参见示例 http://jsfiddle.net/5bv2Z/19/