CODEWITHSUNDEEP
angularjsangularjs-directive
Irfad Ibrahim
Irfad Ibrahim

Reputation: 71

How to assign focus function on last element in element.find()

I was able to insert new input element on focus on first input element by doing this. here is the fiddle.

http://jsfiddle.net/nr0tbh86/1/

html code:

<div ng-app="myApp" ng-controller="MyCtrl">
    <div add-input>
        <input type="text" placeholder="focus on this"><br>
    </div>
</div>

Controller.js:

var app = angular.module('myApp', []);

app.controller('MyCtrl', ['$scope', function ($scope) {
    // Define $scope.telephone as an array
    $scope.inputFeild = [];
    // Create a counter to keep track of the additional telephone inputs
    $scope.inputCounter = 0;

    // This is just so you can see the array values changing and working! Check your console as you're typing in the inputs :)
    $scope.$watch('telephone', function (value) {
        console.log(value);
    }, true);
}]);

// I've created this directive as an example of $compile in action. 
app.directive('addInput', ['$compile', function ($compile) { // inject $compile service as dependency
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            // click on the button to add new input field
            element.find('input').bind('focus', function () {
                // I'm using Angular syntax. Using jQuery will have the same effect
                // Create input element
                var input = angular.element('<div><input type="text" ng-model="inpuTfeild[' + scope.inputCounter + ']"></div>');
                // Compile the HTML and assign to scope
                var compile = $compile(input)(scope);

                // Append input to div
                   element.append(input);

                // Increment the counter for the next input to be added
                scope.inputCounter++;
            });
        }
    }
}]);

But what I actually need is to generate an input on focusing last input.

Upvotes: 1

Views: 948

Answers (1)

Bharat
Bharat

Reputation: 943

Please try after() instead of append(). append() adds to the inner of the div. With append the new divs are added inside the first div which doesnt look right.

<div add-input="">
    <input type="text" placeholder="focus on this"><br>
    <div add-input="" class="ng-scope">
        <input type="text" ng-model="inputFeild[0]" class="ng-pristine ng-valid">
    </div>
</div>

Upvotes: 1

Related Questions