Angular Js..., ng-click function doesn't work

Question

I'm new to AngularJs, my problem is that when I clicked the button that I append it doesn't call the function or the function doesn't work.

HTML

</tbody>
    <tr>
        <td><input type="text" class="form-control" ng-model="contact.name"/></td>
        <td><input type="text" class="form-control" ng-model="contact.email"/></td>
        <td><input type="text" class="form-control" ng-model="contact.number"/></td>
        <td colspan="2">
        <button class="btn btn-primary btn-block" ng-click="addContact()">Add Contact</button>
        </td>
    </tr>
    <tr ng-repeat="contact in contactlist">
        <td>{{contact.name}}</td>
        <td>{{contact.email}}</td>
        <td>{{contact.number}}</td>
        <td><button class="btn btn-danger" ng-click="removeContact(contact._id)"><i class="glyphicon glyphicon-trash"></i></button></td>
        <td><button class="btn btn-info" ng-click="editContact(contact._id)"><i class="glyphicon glyphicon-pencil"></i></button></td>
    </tr>
</tbody>

ANGULAR

$scope.editContact = function(id){
    $http.get('/contactlist/' + id).success(function(response){
        $scope.contact = response;

        var addButton = angular.element('#custom_btn');

        addButton.empty();

        addButton.append('<button class="btn btn-success btn-block" ng-click="update()">Update Contact</buton>');
    });
};

$scope.update = function(){
    alert('test');
};

what is wrong with my code. my idea is that it is the same with jQuery.. where all elements appended by jquery will have a body on its function call..

thanks in advance.

please put your html code,in order to see what's going on in the view — soroush gholamzadeh
– soroush gholamzadeh, Commented Aug 11, 2015 at 7:21
please read this answer before starting out with Angular - it will save you a lot of headache — New Dev
– New Dev, Commented Aug 11, 2015 at 7:23
is it a typo?: you have addContact() but your real function is editContact() — soroush gholamzadeh
– soroush gholamzadeh, Commented Aug 11, 2015 at 7:25
@soroushgholamzadeh no.., no error in the code but when the button change.. to update... the ng-click doesn't work. — Sam Teng Wong
– Sam Teng Wong, Commented Aug 11, 2015 at 7:28

Community · Accepted Answer · 2017-05-23 12:22:00Z

2

First of all please read this discusstion.

You can use ng-if directive in the html view instead of JQuery:

<tr>
...
    <td colspan="2" id="custom_btn">
        <button class="btn btn-primary btn-block" ng-click="addContact()">Add Contact</button>
        <button ng-if="isEdited" class="btn btn-success btn-block" ng-click="update()">Update Contact</buton>
    </td>
</tr>

And in the editContact function:

$http.get('/contactlist/' + id).success(function(response){
    $scope.contact = response;

    $scope.isEdited = true;
});

Note: if you got error for update() use $parent.update() in the view.

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Aug 11, 2015 at 7:34

soroush gholamzadeh

2,7941 gold badge24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Js..., ng-click function doesn't work

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related