Question

我使用数据表angularjs显示用户列表。我想在选中的复选框上禁用\启用按钮。我有一个按钮这个按钮启用了一个选中的复选框在表中另外明智地禁用此按钮。任何一个如何做到这一点。

这是我的按钮：

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

这是我的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);
       } 
    } 
 ]);

这是我的代码所以任何一个想法如何做到这一点请告诉我。

Answer 1

这是一个非常简单的示例，介绍如何在选中/取消选中条目时启用/禁用删除按钮。

＆＃13;

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);
    }

}]);

＆＃13;

<!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>

＆＃13;

如何禁用数据表AngularJS中选中复选框上的\ enable按钮？

1 个答案: