データテーブルAngularJSのチェックボックスをオンにすると、チェックボックスを無効にする方法？

私は、データテーブルのanglejを使ってユーザリストを表示しています。私は無効にしたい\チェックボックスのチェックボックスを有効にしたい.iこのボタンを有効にするには、このボタンを有効にしてください。他の賢明な方法でこのボタンを無効にしてください。データテーブル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); 
     } 
    } 
]);

これは私のコードは私に教えてくださいことを行うことができますどのようにいずれかのアイデアです：

は、これが私のボタンです。

出典

2017-04-19 coderwill

コントローラ内でDOMを操作しないでください、それは悪い考えです。代わりに、ディレクティブを使用してテーブルを構築します。このトピックを読む：http://stackoverflow.com/questions/31032855/why-is-it-considered-a-bad-ide-to-manipulate-dom-in-controllers –

@ stej4nあなたは私にどのようにヒントを与えることができますか？それ。 – coderwill

ここでは、エントリのチェック/チェック解除時に削除ボタンを有効/無効にする方法の非常に簡単な例を示します。

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>

出典

2017-04-19 07:49:44

$ scope.deleteUserメソッドを追加 –

助けてくれてありがとう.. – coderwill

データテーブルAngularJSのチェックボックスをオンにすると、チェックボックスを無効にする方法？

答えて

関連する問題