2

I get data http.get in AngularJS project, like this:

  $http.get('data.json')
  .then(function (response){
    $scope.boxes = response.data;
  }).catch(function(response) {
    console.error('Error occurred:', response.status, response.data);
  }).finally(function() {
    console.log("Task Finished.");
  });

And I wanna filter this items by category:

// Functions - Public
 this.filterByCategory = filterByCategory;
 this.getCategories = getCategories;

  // Functions - Definitions
  function filterByCategory(box) {
    return (this.filter[box.cat1] || noFilter(this.filter))? 'show':'not-click';
  }

  function getCategories() {
    return (self.boxes || []).
    map(function (box) { return box.cat1; }).
    filter(function (box, idx, arr) { return arr.indexOf(box) === idx; });
  }
...

Here is my HTML:

<ul ng-repeat="cat in ctrl.getCategories()">

        <li>
          <input type="checkbox" ng-model="ctrl.filter[cat1]" id='{{$index}}' class='chk-btn styled-checkbox' />
          <label for='{{$index}}'>{{cat}}</label>
        </li>

      </ul>

But when I click an item, its selected all, not related category. What's the problem?

J. Doe
  • 105
  • 7
  • You shouldn't really be repeating over a function (see here: https://stackoverflow.com/a/12340772/4166407). Can you create a Plunkr for your problem and give an example of the structure of $scope.boxes? – Sophie Oct 03 '17 at 15:05

0 Answers0