Creating interactive buttons on the fly in Angular

Question

Creating interactive buttons on the fly in Angular

In my Angular application, I am attempting to create a button dynamically that calls the deleteRow() function and passes a username parameter upon click. Despite successfully passing the username to the controller, the generated button ends up passing undefined to the deleteRow() function. I suspect there may be an issue with how I am utilizing $compile. Have a look at the code snippet below:

validationApp.controller('usersController', function ($scope, $compile, $http, $timeout){
    $(document).on("click", ".open-confirm-dialog", function () {
        var username = $(this).data('id');
        var btnHtml = '<button class="btn btn-danger" data-title="Delete" ng-click="deleteRow(' + username + ')">DELETE</button>';
        var temp = $compile(btnHtml)($scope);
        angular.element(document.getElementById('deleteButton-dynamic')).append(temp);
    });

    $scope.deleteRow = function(username){
        alert(username); //This shows 'undefined' in the pop-up
        var request = $http({
        method: "post",
        url: "scripts/delete.php",
        data: { un: username },
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    });

    request.success(function() { });
    location.reload();
};

Here is the corresponding HTML code:

<div class="row" ng-controller="usersController">
    <div class="table-responsive col-md-12" ng-show="filteredItems > 0">
    <table id="users" class="table table-bordred table-striped">
        <thead>
            <th ng-click="sort_by('username');">Username:&nbsp;<i class="glyphicon glyphicon-sort"></i></th>
            <th ng-click="sort_by('submitted_info');">Submitted Info.:&nbsp;<i class="glyphicon glyphicon-sort"></i></th>
        </thead>
        <tbody>
            <tr ng-repeat="data in filtered = (list | orderBy : predicate :reverse)">
                <td>{{data.username}}</td>
                <td>{{data.submitted_info}}</td>
                <td><a href="#confirmModal" class="open-confirm-dialog" data-toggle="modal" data-id='{{data.username}}'><span class="glyphicon glyphicon-trash"></span></a></td>
            </tr>
        </tbody>
    </table>

    </div>
        <div class="col-md-12" ng-show="filteredItems == 0">
            <div class="col-md-12">
                <h4>No customers found</h4>
            </div>
        </div>
        <div class="col-md-12" ng-show="filteredItems > 0">
        <div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="&laquo;" next-text="&raquo;"></div>
        </div>

        <!-- Confirm Modal -->
        <div id="confirmModal" user-id="" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirmModal" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
                    </div>
                <div class="modal-body">
                Are you sure you want to delete this user from the database?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>     
                <span id="deleteButton-dynamic"></span>
                <!--Working HardCoded Button
                <button class="btn btn-danger" data-title="Delete" ng-click="deleteRow('user1')">WorkingButton</button>
                -->
            </div>
        </div>
    </div>
</div>

javascript angularjs angularjs-compile

Answer 1

Answer №1

When using Angular, it's important to remember that the value passed to the deleteRow function is treated as part of an expression. This means that Angular will look in the scope for a key that matches the value of the username. To avoid any errors, make sure to update the ng-click expression by enclosing the concatenated username string in quotes, like this: deleteRow(\''+ username + '\')

Answer 2

When using Angular, it's important to remember that the value passed to the deleteRow function is treated as part of an expression. This means that Angular will look in the scope for a key that matches the value of the username. To avoid any errors, make sure to update the ng-click expression by enclosing the concatenated username string in quotes, like this: deleteRow(\''+ username + '\')

Answer 3

Answer №2

Recommendation: Implement a directive.

Here are the steps to achieve this based on the provided code snippet:

Define the directive's JavaScript code:

// Begin by defining the directive controller

function dynamicButton ($scope, $http){
    $scope.deleteRow = function(){
        // The value of $scope.username is derived from the parent controller
    };
});

// Register the directive with AngularJS

validationApp.directive(dynamicButton.name, function(){
  return {
    controller: dynamicButton.name,
    restrict: 'E',
    templateUrl: 'pathtoyourhtmlpartial',
    scope: {
      username: '='
    }
  }
}

Update the HTML: Call the directive from the original controller and create the new partial for the button.

Activate the directive in your original controller. For instance, set $scope.buttonSwitchedOn to true. AngularJS will then automatically load and execute your directive.

Answer 4

Recommendation: Implement a directive.

Here are the steps to achieve this based on the provided code snippet:

Define the directive's JavaScript code:

// Begin by defining the directive controller

function dynamicButton ($scope, $http){
    $scope.deleteRow = function(){
        // The value of $scope.username is derived from the parent controller
    };
});

// Register the directive with AngularJS

validationApp.directive(dynamicButton.name, function(){
  return {
    controller: dynamicButton.name,
    restrict: 'E',
    templateUrl: 'pathtoyourhtmlpartial',
    scope: {
      username: '='
    }
  }
}

Update the HTML: Call the directive from the original controller and create the new partial for the button.

Activate the directive in your original controller. For instance, set $scope.buttonSwitchedOn to true. AngularJS will then automatically load and execute your directive.

Creating interactive buttons on the fly in Angular

Answer №1

Answer №2

Similar questions

Vue.js has mysteriously stopped functioning

Set restrictions on the element with a fixed position

Storing transformed values in a React Functional Component: Best Practices and Considerations

Incorporate the block-input feature from sanity.io into your next.js blog for enhanced functionality

Why isn't the JavaScript if statement working properly when checking the length?

Enhance the appearance of the jQuery document.ready function

Guide on utilizing popup box input to amend CSS (background color)

Transitioning in Vue.js can be triggered by changing a value up or down

Populate my empty arrays with information retrieved from Firebase

Retrieve the weekday dates for a specific year, month, and relative week number using Javascript or Typescript

What is the best way to incorporate dynamic HTML content into the designated section?

Discover the way to utilize the java enum toString() function in jQuery

How to open external links in a Cordova app using AngularJS

Tips for creating an illustration in Vue.js

How can I reset a CSS position sticky element using JavaScript?

Unusual Behavior of JavaScript for..in and enum

Displaying the structure of a MongoDB database using Express and Angular in a tabular format

Tips for showing ng-repeat items solely when filters are applied by the user

Eliminating blank elements from arrays using JavaScript

FlexSlider in WordPress is failing to display captions