JSFiddle - React, Tailwind, and code Playground

by Warspawn

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <ul>
        <li repeat-focus ng-repeat="item in items">
            <input type="text" value="{{ item }}" />
        </li>
    </ul>
    <button ng-click="change()">Change</button>
</div>

CSS

input:focus {border: 1px solid red;}

JavaScript

angular.module("myApp", [])
    .controller("MyCtrl", function($scope) {
        $scope.items = ['a', 'b', 'c'];
        
        $scope.change = function() {
            $scope.items = ['q','w','e','r','t','y'];
        };
    })
    .directive('repeatFocus', function($log) {
        return {
            link: function(scope, el, attrs) {
                if(scope.$first) {
                    $log.log('first!', el);
                    $(el).find('input').focus();
                }                    
            }
        };
    });