how to disable\enable button on checked check box in datatable AngularJS?

Question

I'm show the user list using datatable angularjs. I want to disable\enable button on checked check box.i have the one button this button enable on etlish one checked on check box in the table other wise disable this button.any one how can do that.

this is my button :

<button type="button" class="btn btn-success">Send</button>

This is my controller.js

app.controller("userscontroller", [
   "$scope", 
   "$http", 
   "DTOptionsBuilder", 
   "DTColumnBuilder", 
   "userservice",
   "$compile",
   function ($scope, $http, DTOptionsBuilder, DTColumnBuilder, userservic, $compile) {       
       $scope.dtColumns = [            
          DTColumnBuilder.newColumn("fullName", "Full Name").withOption('name','firstname'),
          DTColumnBuilder.newColumn("username", "Name").withOption('name','username'),
          DTColumnBuilder.newColumn("email", "Email").withOption('name', 'email'),
          DTColumnBuilder.newColumn(null).withTitle('Action').notSortable().renderWith(function (data, type, full, meta) {            
              return '<button class="btn btn-primary" ng-click="delete(' + data.id + ');"><i class="fa fa-eye"></i>' + '</button>';                    
          }),     
          DTColumnBuilder.newColumn(null).withTitle('Action').notSortable().renderWith(function (data, type, full, meta) {            
              return '<input type="checkbox" name="check" id="'+ data.userid +'">';                    
          })          

       ]

       $scope.dtOptions = userservice.GetAllUser(DTOptionsBuilder)
                         .withOption('processing', true)
                         .withOption('serverSide', true)
                         .withPaginationType('full_numbers')
                         .withDisplayLength(50)
                         .withOption('aaSorting', [3, 'desc']);

       function createdRow(row, data, dataIndex) {
            $compile(angular.element(row).contents())($scope);
       } 
    } 
 ]);

this is my code so any one idea how can do that please let me know.

Don't manipulate DOM in your controller, it's a bad idea. Use a directive instead to build your table. Read this topic : stackoverflow.com/questions/31032855/… — Stephane Janicaud
– Stephane Janicaud, Commented Apr 19, 2017 at 7:07

Stephane Janicaud · Accepted Answer · 2017-04-19 07:49:44Z

Here is a very simple example on how to enable/disable a delete button when checking/unchecking an entry.

angular.module('app', []);

angular.module('app').controller('ExampleController', ['$scope', '$q', function($scope, $q) {

    $scope.users = [{
            "id": "1",
            "fullName": "Marty McFly",
            "username": "mmfly",
            "email": "[email protected]"
        },
        {
            "id": "2",
            "fullName": "Robert Plant",
            "username": "rplant",
            "email": "[email protected]"
        }
    ];
    
    $scope.deleteUser = function(id) {
      console.log("Deleting user with id", id);
    }

}]);

<!doctype html>

<html lang="en" ng-app="app">

<head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
    <script src="script.js"></script>
</head>

<body>

    <div ng-controller="ExampleController">
        <table border="1" cellpadding="8">
            <tr>
                <th></th>
                <th>Fullname</th>
                <th>Username</th>
                <th>Email</th>
                <th>Actions</th>
            </tr>
            <tr ng-repeat="user in users">
                <td><input type="checkbox" ng-model="user._selected"></td>
                <td>{{user.fullName}}</td>
                <td>{{user.username}}</td>
                <td>{{user.email}}</td>
                <td><button ng-disabled="!user._selected" ng-click="deleteUser(user.id)">Delete</button></td>
            </tr>
        </table>
    </div>

</body>

</html>

Collectives™ on Stack Overflow

how to disable\enable button on checked check box in datatable AngularJS?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related