Perform focus after underlying data changes

reportingApp.controller('tradeController', function($scope) {
    $scope.trades = [
        //{ticker: 'AAPL', shares: 100, limit: 500},
        //{ticker: 'GE', shares: -400, limit: 600},
    ];          
    $scope.addNewTrade = function () {
        console.log ('addNewTade executes');
            $scope.trades.push({ticker: "", shares: "", limit: ""});
           $("table tr:last td:first").focus();
    }

The focus() function does not work, because at the time it gets to run, the html row has not changed yet. Where should I put my focus code?

Answers


Try my custom directive:

app.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();
               }
           });
         }
     };
})

Use it:

custom-autofocus="$index == trades.length-1"

Set the element focused when it's the last one.

DEMO


Need Your Help

TSQL Dates and Numbers

sql sql-server temp-tables row-number

This is an open-ended "how should I best pull this off" question. I have a table (dbo.session_dates) that will receive dates (no timestamps) and where each date will be unique. There is no partic...

'Not an ARRAY reference' error thrown

mysql perl

I'm writing a Perl script that is meant to deal with an API which returns metrics about a set of URLs that I pull from MySQL then post these metrics back into a different table. Currently this piec...