HTML5：如何使用AngularJS将焦点设置在列表中的文本输入上

Question

我将AngularJS与ng-repeat指令一起使用，以将对象数组显示为列表。

<li ng-repeat="cue in cues" class="form-inline">
    <input type="text" ng-model="cues[$index].text" class="input-xlarge"/>
    {{cue.isNewest}}
</li>

属性“ isNewest”仅在数组的一个元素上为true。我想将键盘焦点设置在该项目的文本输入上。如何使用AngularJS做到这一点？

Answer 1

这是另一个使用attrs。$ observe的指令实现：

myApp.directive('focus', function () {
  return function (scope, element, attrs) {
    attrs.$observe('focus', function (newValue) {
      newValue === 'true' && element[0].focus();
      // or, if you don't like side effects (see @Christophe's comment):
      //if(newValue === 'true')  element[0].focus();
    });
  }
});

请注意，插值的DOM属性值（即{{cue.isNewest}}）始终计算为字符串，因此将原因newvalue与字符串'true'而不是keyword进行比较true。

HTML：

<input type="text" ng-model="cues[$index].text" focus="{{cue.isNewest}}"
 class="input-xlarge" />{{cue.isNewest}}

这个小提琴还有一个方法可以切换数组中的哪个项目应具有焦点。

请注意，如果您不加载jQuery，则element[0].focus()由于element.focus()jqLit​​e没有focus（）方法，因此需要在链接函数中使用（而不是）。