как я могу добавить модель выборки в угловом столе

Question

Угловой код создания таблицы с типом ввода флажок.

angular.module("tableApp",[]).controller('tableAppCtrl', ['$scope', 
 
    function($scope) { 
 
    $scope.titleString="Table Demo"; 
 
    $scope.prodDataTable = [{ 
 
     "productType": "A", 
 
     "productName": "Aaaaaa" 
 
    }, { 
 
     "productType": "B", 
 
     "productName": "Bbbbbb" 
 
    }, { 
 
     "productType": "C", 
 
     "productName": "Cccccc" 
 
    }]; 
 
    } 
 
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div ng-app="tableApp" ng-controller="tableAppCtrl"> 
 
    <h3>{{titleString}}</h3> 
 
<table> 
 
    <tr> 
 
    <th><input type="button" value="checkALL"></th> 
 
    <th>Product Type</th> 
 
<th>Product Name</th> 
 

 
    </tr> 
 

 
    <tr ng-repeat="d in prodDataTable"> 
 
    <td><input type="checkbox"></td> 
 
    <td>{{d.productType}}</td> 
 
    <td>{{d.productName}}</td> 
 
    </tr> 
 

 

 
</table> 
 
    </div>

Я использовал угловой стол, и я должен включать в себя модель выбора к нему.

Пожалуйста, предложите способы или ссылки, чтобы использовать его со столом.

Answer 1

использовать это, но вы должны работать на дубликате значение creation-

<div ng-app="tableApp" ng-controller="tableAppCtrl"> 
<h3>{{titleString}}</h3> 
<table> 
    <tr> 
    <th><input type="button" value="{{(selectAllval==true) ? 'UncheckALL' : 'checkALL'}}" ng-click="selectAll(selectAllval)"></th> 
    <th>Product Type</th> 
<th>Product Name</th> 

    </tr> 

    <tr ng-repeat="d in prodDataTable"> 
    <td><input type="checkbox" ng-checked="selectAllval" ng-click="setProductType(d.productType)"></td> 
    <td>{{d.productType}}</td> 
    <td>{{d.productName}}</td> 
    </tr> 


</table> 

{{setProductTypes}} 

angular.module("tableApp",[]).controller('tableAppCtrl', ['$scope', function($scope) { 
    $scope.titleString="Table Demo"; 
    $scope.selectAllval= false; 
    $scope.setProductTypes= []; 
    $scope.selectAll= function(val){ 
     if(val==false){ 
      $scope.selectAllval= true; 
     } else{ 
      $scope.selectAllval= false; 
     } 
    }; 
    $scope.setProductType= function(type){ 
     $scope.setProductTypes.push(type); 
    }; 
    $scope.prodDataTable = [{ "productType": "A", "productName": "Aaaaaa" }, { "productType": "B", "productName": "Bbbbbb" }, { "productType": "C", "productName": "Cccccc" }]; } ]); 

Answer 2

попробуйте следующий код -

angular.module("tableApp",[]).controller('tableAppCtrl', ['$scope', 
 
function($scope) { 
 
    $scope.titleString="Table Demo"; 
 
    $scope.selectAllval= false; 
 
    $scope.selectAll= function(val){ 
 
\t if(val==false){ 
 
\t \t $scope.selectAllval= true; 
 
\t } else{ 
 
\t \t $scope.selectAllval= false; 
 
\t } 
 
    }; 
 
    $scope.prodDataTable = [{ 
 
    "productType": "A", 
 
    "productName": "Aaaaaa" 
 
    }, { 
 
    "productType": "B", 
 
    "productName": "Bbbbbb" 
 
    }, { 
 
    "productType": "C", 
 
    "productName": "Cccccc" 
 
    }]; 
 
} 
 
]);

 

 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
    <div ng-app="tableApp" ng-controller="tableAppCtrl"> 
 
    <h3>{{titleString}}</h3> 
 
\t <table> 
 
\t <tr> 
 
\t  <th><input type="button" value="{{(selectAllval==true) ? 'UncheckALL' : 'checkALL'}}" ng-click="selectAll(selectAllval)"></th> 
 
\t  <th>Product Type</th> 
 
\t <th>Product Name</th> 
 

 
\t </tr> 
 

 
\t <tr ng-repeat="d in prodDataTable"> 
 
\t  <td><input type="checkbox" ng-checked="selectAllval" ></td> 
 
\t  <td>{{d.productType}}</td> 
 
\t  <td>{{d.productName}}</td> 
 
\t </tr> 
 

 

 
\t </table> 
 
    </div>