0

An input field is being generated by ng-repeat. The input tag includes ng-model and ng-blur. The ng-blur action is not triggered and the console doesn't show any errors.

The HTML is generated by a Zend Framework 3 app. I'm using angularjs 1.7.8 and jquery 3.1.0.

Here is the body of the web page

<body ng-app='byDomainApp' ng-controller='ByDomainCtrl'>
<center>
    <h2>Maintenance By Domain</h2>
</center>
<p>You may edit/correct any of the following details. Note that an
    update will be ignored if the email address is changed to one that has
    been tried previously.</p>
<div class='row'>
    <div class='col-xs-3'>
        Choose a domain: <select class='form-control' ng-model="myDomain"
            ng-change="domainUsers(myDomain)"
            ng-options="domain.domain_name for domain in domains track by domain.domain_id"></select>
        <p ng-hide 'message=null' >
            <br> <br>{{message}}
        </p>
    </div>
</div>
<div class='row'>
    <div class='col-xs-2'>Name</div>
    <div class='col-xs-2'>Email</div>
    <div class='col-xs-2'>Company</div>
    <div class='col-xs-2'>Job title</div>
    <div class='col-xs-2'>Country</div>
    <div class='col-xs-2'>Confirmed?</div>
</div>
<div ng-repeat="user in users" class='row'>
    <div class='col-xs-2'>
        <input ng-model="user.user_name" ng-blur="updateUser(user)">
    </div>
    <div class='col-xs-2'>{{user.user_email}}</div>
    <div class='col-xs-2'>{{user.user_company}}</div>
    <div class='col-xs-2'>{{user.user_jobtitle}}</div>
    <div class='col-xs-2'>{{user.user_country}}</div>
    <div class='col-xs-2'>{{user.user_confirmed}}</div>
</div>

The Javascript angular code

angular.module('byListApp', []).constant("listUrl",
        "http://elms2.com/list-rest").constant("userUrl",
        "http://elms2.com/user-rest").controller(
        "ByListCtrl",
        function($scope, $http, listUrl, userUrl) {
            $scope.hide = true;
            $scope.showMessage = false;
            $http.get(listUrl + '/' + ownerId).then(function(response) {
                $scope.lists = response.data;
            }, function(error) {
                $scope.error = error;
                alert(error);
            });

            $scope.listUsers = function(list) {
                $scope.message = '';
                $scope.hide = true;
                $scope.showMessage = false;
                // $scope.booksFound[0].message = '';
                $http.get(userUrl + '/byList:' + list.list_id).then(
                        function(response) {
                            $scope.users = response.data;
                        });
            };
        });

angular.module('byDomainApp', []).constant("domainUrl",
        "http://elms2.com/domain-rest").constant("userUrl",
        "http://elms2.com/user-rest").controller(
        "ByDomainCtrl",
        function($scope, $http, domainUrl, userUrl) {
            $scope.hide = true;
            $scope.showMessage = false;
            $http.get(domainUrl).then(function(response) {
                $scope.domains = response.data;
            }, function(error) {
                $scope.error = error;
                alert(error);
            });

            $scope.domainUsers = function(domain) {
                $scope.message = '';
                $scope.hide = true;
                $scope.showMessage = false;
                $http.get(userUrl + '/byDomain:' + domain.domain_id).then(
                        function(response) {
                            $scope.users = response.data;
                        }, function(error) {
                            $scope.error = error;
                            alert(error);
                        });
            };

            $scope.updateUser = function(user) {
                $http.get(userUrl + '/updateUser:' + user).then(
                        function(response) {
                            $scope.userData = response.data;
                        }, function(error) {
                            $scope.error = error;
                            alert(error);
                        });
            };
        });

The list of domains is generated correctly and the ng-repeat fills with the correct data when a domain is selected. However nothing happens when the input field contents are edited and then loses focus. I can prove that by deleting the updateUser function from the angular code or replacing the ng-blur action with an alert or similar.

Mehmet SÖĞÜNMEZ
  • 605
  • 6
  • 13
user3017691
  • 183
  • 2
  • 11
  • A jsfiddle or such would be helpful, but before that exists: inspect the user element in your ng-repeat. Can you see the `updateUser` in the scope? (See for instance https://stackoverflow.com/questions/13743058/how-do-i-access-the-scope-variable-in-browsers-console-using-angularjs on how to access scope in your browser) Can you then call the function, e.g. by `angular.element($0).scope().updateUser(angular.element($0).scope().user)` in your console. – jsruok Apr 25 '19 at 12:59
  • I don't see any problem with the code though it is confusing to include an extra app that is not part of the template. One app (the one not used) is missing the `$scope.upDate` function. – georgeawg Apr 25 '19 at 14:33
  • I tried that call jsrouk suggested. Response was Uncaught TypeError: Cannot read property 'updateUser' of undefined at :1:28 – user3017691 Apr 26 '19 at 09:11

1 Answers1

0

This is now working and I can't explain why as nothing has changed.

user3017691
  • 183
  • 2
  • 11