CODEWITHSUNDEEP
javascripthtmlangularjs
Jimenemex
Jimenemex

Reputation: 3166

ng-click not updating UI automatically

I'm having trouble displaying a <td> in my ng-repeat produced table.

The last <td> in the table should be displayed based on a condition, if vm.editDeleteButtonsVisibile (Using the Controller-As syntax) is true. By default this value is false but when I change it to true, the UI doesn't reflect the change.

This is how my <tbody> looks:

<tbody ng-controller="EditProductController as vm"> <!-- This ng-controller is somewhere else -->
    <tr ng-repeat="product in vm.products">
        <td>{{ product.productName}}</td>
        <td>{{ product.productCode }}</td>
        <td>{{ product.releaseDate | date }}</td>
        <td>{{ product.price | currency }}</td>
        <td width="15%" ng-if="vm.editDeleteButtonsVisible"> <!-- Error Here -->
            <button type="button" class="btn btn-default" ng-click="vm.editItem(product.productCode)">Edit</button>
            <button type="button" class="btn btn-danger" ng-click="vm.deleteItem(product.productCode)">Delete</button>
        </td>
    </tr>
</tbody>

This is the controller where I'm updating the value vm.editDeleteButtonsVisible:

var EditProductController = function() {
    vm.editDeleteButtonsVisible = false; // Default value

    vm.showEditDeleteButtons = function() {
        vm.editDeleteButtonsVisible = true;
        console.log(vm.editDeleteButtonsVisible); // Prints true, so value was updated
    }
}

This is how vm.showEditDeleteButtons() is being called, from another view:

<div id="editProductBtn" ng-controller="EditProductController as pvm">
    <button type="button" class="btn btn-default" ng-click="pvm.showEditDeleteButtons()">Edit Products</button>
</div>

Could the problem be that I'm already declaring ng-controller="EditProductController"? I declare it once in it's main view and another time in a separate view.

Upvotes: 3

Views: 56

Answers (1)

Doug E Fresh
Doug E Fresh

Reputation: 840

Your problem is that you are defining the controller twice. Angular controllers are not singletons. So you are creating two instances of it. You are updating a variable in one of them and looking for it in the other. This won't work. 

<div id="editProductBtn" ng-controller="EditProductController as pvm">

and 

<tbody ng-controller="EditProductController as vm">

Creates two instances. What you need to do is either use one controller or create a service (which IS a singleton) and hold the variable in the service.

Upvotes: 1

Related Questions