javascript - Unable to trigger function inside controller using AngularJS / jQuery when focussed on last element in ng-repeat -
in webpage, when user focusses on last <input>, want set of <input> , <select> added dynamically.
if ng-click on <button>, works fine not focus event on last <input>.
var note = function($scope){ $scope.items = []; $scope.options = [{name: 'x'}, {name: 'y'}]; $scope.add = function () { console.log('adding..'); $scope.items.push({ question: "", questionplaceholder: "foo", }); //console.dir($scope.items); }; $scope.add(); $('input:last-child').on('focus', function(){ // not work console.log('adding elements dynamically'); $scope.add(); $scope.$apply(); }); }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script> <div ng-app> <div ng-controller="note" id='itemspool'> <form ng-submit="submithandler()"> <div ng-repeat="item in items"> <input type="text" placeholder="url" ng-model="item.question"> <select ng-init="item.type = options[0]" ng-model='item.type' ng-options="option.name option in options"> </select> </div> </form> <button ng-click='add()'>add</button> <!-- works! --> <span><-- button removed eventually</span> </div> </div>how fix this?
is possible fix without using jquery? how?
don't use jquery using now, use dedicated angular directives. in case need ngfocus.
this attribute work you:
ng-focus="$last && add()" check demo:
var note = function($scope){ $scope.items = []; $scope.options = [{name: 'x'}, {name: 'y'}]; $scope.add = function () { console.log('adding..'); $scope.items.push({ question: "", questionplaceholder: "foo", }); //console.dir($scope.items); }; $scope.add(); }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script> <div ng-app> <div ng-controller="note" id='itemspool'> <form ng-submit="submithandler()"> <div ng-repeat="item in items"> <input type="text" placeholder="url" ng-model="item.question" ng-focus="$last && add()"> <select ng-init="item.type = options[0]" ng-model='item.type' ng-options="option.name option in options"> </select> </div> </form> <button ng-click='add()'>add</button> <!-- works! --> <span><-- button removed eventually</span> </div> </div>the problem original approach there nothing bind focus event to, when using jquery in controller, because ngrepeat has not yet rendered anything. of course, workaround delegated event on parent container, see how clumsy getting , not clear.
Comments
Post a Comment