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 : http://stackoverflow.com/questions/31032855/why-is-it-considered-a-bad-idea-to-manipulate-dom-in-controllers — Stephane Janicaud, Apr 19 '17 at 07:07

score 1 · Accepted Answer · answered Apr 19 '17 at 07:49

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": "mmfly@bttf.com"
        },
        {
            "id": "2",
            "fullName": "Robert Plant",
            "username": "rplant",
            "email": "rplant@ledzep.com"
        }
    ];
    
    $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>

Added $scope.deleteUser method – Stephane Janicaud Apr 19 '17 at 07:54 — Stephane Janicaud, Apr 19 '17 at 07:54

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

1 Answers1