angularjs checkbox with ng-repeat

Question

i want to make something like this angularjs-checkbox

this is my code

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head></head>
<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
    $scope.records = [
      "ALL",
      "KOREAN",
      "ENGLISH",
      "CHINESE",
      "JAPANESE",
      "GERMAN",
      "FRENCH",
      "ITALIAN",
      "SPANISH",
      "OTHERS",
    ]
  });
</script>

<body class="other_page" ng-app="myApp">
  <table class="checkbox_table" ng-controller="myCtrl">
    <tr>
      <td colspan="3" class="filter_subtitle_td">
        <div class="filter_subtitle">
          <span>
            CATEGORY
          </span>
        </div>
      </td>
    </tr>
    <tr ng-repeat="x in records" ng-if="$index % 3 == 0">
      <td class="checkbox_td">
        <input type="checkbox" id="{{records[$index]}}" class="category_filter_checkbox" ng-model="all" />
        <label for="{{records[$index]}}" class="checkbox_label">
          {{records[$index]}}
        </label>
      </td>
      <td class="checkbox_td" ng-if="x != ''">
        <input type="checkbox" id="{{records[$index + 1]}}" class="category_filter_checkbox" ng-checked="all" />
        <label for="{{records[$index + 1]}}" class="checkbox_label">
          {{records[$index + 1]}}
        </label>
      </td>
      <td class="checkbox_td" ng-if="x != ''">
        <input type="checkbox" id="{{records[$index + 2]}}" class="category_filter_checkbox" ng-checked="all" />
        <label for="{{records[$index + 2]}}" class="checkbox_label">
          {{records[$index + 2]}}
        </label>
      </td>
    </tr>
  </table>
</body>

</html>

my questions is:

how to make ng-repeat stop when no data left?
how to give only 'ALL' data ng-model so the other checkbox can be selected by click this 'ALL' checkbox?

Thank you for your help

Maxim Shoustin · Accepted Answer · 2017-04-30 18:08:21Z

I think you chose too complicated way.

To simplify you can use lodash.com or underscorejs and split array to chunks as: $scope.records = _.chunk(data, 3);

So output will be:

[[{"type":"ALL","value":false},{"type":"KOREAN","value":false},{"type":"ENGLISH","value":false}],[{"type":"CHINESE","value":false},{"type":"JAPANESE","value":false},{"type":"GERMAN","value":false}],[{"type":"FRENCH","value":false},{"type":"ITALIAN","value":false},{"type":"SPANISH","value":false}],[{"type":"OTHERS","value":false}]]

Further, to make checkboses to work properly with ng-model we need pass not primitive but objects as {type:<NAME>, value:true/false}:

var data = [
  {type:"ALL",value:false},
  {type:"KOREAN",value:false},
  {type: "ENGLISH",value:false},
  {type: "CHINESE",value:false},
  {type:"JAPANESE",value:false},
  {type: "GERMAN",value:false},
  {type:"FRENCH",value:false},
  {type:"ITALIAN",value:false},
  {type:"SPANISH",value:false},
  {type:"OTHERS",value:false}
  ];
  $scope.all = angular.copy(data[0]);
  $scope.records = _.chunk(data, 3);

So your HTML will look like:

    <table class="checkbox_table" ng-controller="myCtrl">
    <tr>
      <td colspan="3" class="filter_subtitle_td">
        <div class="filter_subtitle">
          <span>
            CATEGORY
          </span>
        </div>
      </td>
    </tr>
    <tr ng-repeat="record in records" >      
      <td  ng-repeat="x in record"  > 
        <input type="checkbox"   ng-model="all.value" ng-if="x.type === 'ALL'" />
        <input type="checkbox"  ng-model="x.value"  ng-checked="all.value" ng-if="x.type !== 'ALL'" />
        <label for="{{x.type}}"  ng-if="x.type !== 'ALL'" >{{x.type}}</label>
        <label for="{{all.type}}"  ng-if="x.type === 'ALL'" >{{x.type}}</label>
     </td>   
    </tr>
  </table>

Demo Fiddle

Collectives™ on Stack Overflow

angularjs checkbox with ng-repeat

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related