dimanche 30 avril 2017

angularjs checkbox with ng-repeat

i want to make something like this angularjs-checkbox

this is my code

<script src="http://ift.tt/1mQ03rn"></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="" class="category_filter_checkbox" ng-model="all" />
        <label for="" class="checkbox_label">
          
        </label>
      </td>
      <td class="checkbox_td" ng-if="x != ''">
        <input type="checkbox" id="" class="category_filter_checkbox" ng-checked="all" />
        <label for="" class="checkbox_label">
          
        </label>
      </td>
      <td class="checkbox_td" ng-if="x != ''">
        <input type="checkbox" id="" class="category_filter_checkbox" ng-checked="all" />
        <label for="" class="checkbox_label">
          
        </label>
      </td>
    </tr>
  </table>
</body>

</html>

my questions is: 1. how to make ng-repeat stop when no data left?
2. 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




Aucun commentaire:

Enregistrer un commentaire