CODEWITHSUNDEEP
jqueryangularjsangularjs-ng-click
RandomUser
RandomUser

Reputation: 1853

Calling function conditionally in AngularJS

I am adding an attribute to a delete button using light weight jQuery that comes along with AngularJS (that's what is said from the source where I found the solution) as shown below:

if (item.CustomerGuid == item.OwnerCustomerGuid) {
    $scope.isDeleteDisabled = false;
    $('#deleteFreight').attr("ng-click", "FreightGroup_delete(" + item.ListGuid + ", " + item.CustomerGuid + ")");
} else {
    $scope.isDeleteDisabled = true;
}

When I inspect the change gets reflected but when I try to click on the button the desired function is not getting invoked.

Need help.

.cshtml(before):

<button class="btn btn-danger" ng-disabled="isDeleteDisabled" 
id="deleteFreight">Delete Freight Group </button>

(after):

<button class="btn btn-danger active" ng-disabled="isDeleteDisabled" 
ng-click="FreightGroup_delete(7338bb3a-9e6b-49d7-be08-7b60ff47ba61, 
  ce3adfcc-d8a1-4a6e-a2b7-d15dc1980384)" id="deleteFreight">
Delete Freight Group </button>

Upvotes: 2

Views: 999

Answers (2)

sameer
sameer

Reputation: 320

Using jquery functions will not affect the scope. Please check with the below code

if (item.CustomerGuid == item.OwnerCustomerGuid) {
    $scope.isDeleteDisabled = false;
    $scope.dynamicAttr= [
       { attr: 'ng-click', value: "FreightGroup_delete(" + item.ListGuid + ", " + item.CustomerGuid + ")" }
    ];
} else {
    $scope.isDeleteDisabled = true;
}

and your HTML look's like this

<button class="btn btn-danger" ng-disabled="isDeleteDisabled" 
id="deleteFreight" dyn-attrs="dynamicAttr">Delete Freight Group </button>

Let me know if it is working.

Upvotes: 1

Wawy
Wawy

Reputation: 6269

Don't mix jquery with angularjs. This should be the right approach if I understand correctly what you are trying to achieve.

JS:

$scope.item = item;

HTML:

<button 
  class="btn btn-danger" 
  ng-click="FreightGroup_delete(item.ListGuid, item.CustomerGuid)" 
  ng-disabled="item.CustomerGuid !== item.OwnerCustomerGuid" 
  id="deleteFreight">Delete Freight Group 
</button>

Upvotes: 1

Related Questions