AngularJS Adding row to a ng-repeat model - How to focus on the newly added row 1st input?

Question

I am trying to add autofocus to the first element in ng-repeat

<div class="border-row" {{$first?focus-autofocus:''}} ng-repeat="item in itemsList" >

But this doesn't work. I'm using https://github.com/obogo/angular-focusmanager. How can I go about adding this?

Answer 1

If you have a list in your itemList, then

<div class="border-row" ng-repeat="item in itemsList" >

<input ng-model="item.id" type="text" custom-autofocus="$index == 0" >

Create a directive for this:

    .directive('customAutofocus', function() {
  return{
         restrict: 'A',

         link: function(scope, element, attrs){
           scope.$watch(function(){
             return scope.$eval(attrs.customAutofocus);
             },function (newValue){
               if (newValue == true){
                   element[0].focus();
               }
           });
         }
     };
})
;

Answer 2

You have to make use of the $index property.$index is 0 for first element. One of the solution may be :

<div class="border-row" ng-repeat="item in itemsList" >
<div ng-if="$index==0" focus-autofocus>
</div></div>

Answer 3

Interpolation doesn't works anywhere inside a tag. It must be the value of an attribute.

I'm not aware of that library but shouldn't this work?

<div class="border-row" focus-autofocus ng-repeat="item in itemsList" >

Or:

<div class="border-row" focus-autofocus ng-repeat="item in itemsList track by $index" >