Items in a Linked Model Checkbox List dissapear when unchecked

I'm trying to filter product results based on Categories and Tags.

A product can have many categories and a category can have many products so it is a many-to-many relationship.

The same goes with Tags.

I would like the filter options to be checked by default (eventually when you select a menu item for example Cat 1, other categories will be unselected in the filter side menu).

The problem I am having now is that when I uncheck a input it disappears from the list. I using a directive to link a list to a group of checkboxes. The list for the menu is different then the model for the group of checkboxes.

I got the directive from here https://github.com/vitalets/checklist-model

Here is demo http://plnkr.co/edit/NjAH4HrTX3qHWw4WmCvb?p=preview

Edit:

Your answer works, but I can't have the checkboxes initially checked. In my real code I am getting the list of categories from the server. I think the newly added angular.copy is copying empty list version.

$scope.categories = [];
  $scope.currentCategory = {};
  $http.get('/api/v1.0/categories/all').
    success(function(data, status, headers, config) {
      angular.copy(orderCategoriesForUser(data.categories), $scope.categories);
      if($scope.categories){
        $scope.currentProduct = $scope.categories[0];
      }
    }
  );
Edit 2:

I had to set a promise to each $http call and then do

categoryPromise = $http.get('/api/v1.0/categories/all').

$q.all([categoryPromise, tagsPromise])
    .then(function(results){
      $scope.sideFilter = {
          'categories': angular.copy($scope.categories),
          'tags': angular.copy($scope.tags),
      };
    });

Answers


Your offending line is:

$scope.sideFilter = {categories: $scope.categories, 'tags': $scope.tags}

The problem is that you're setting the categories and tags properties to a reference type (object), so changes to those properties will directly change the objects they reference.

A quick fix is to use angular.copy in order to set the property to a deep copy of the object:

$scope.sideFilter = {categories: angular.copy($scope.categories), 'tags': angular.copy($scope.tags)};

Fork of your Plunker


Need Your Help

Very long “Wait” time on ajax requests MVC4

asp.net-mvc performance jquery asp.net-mvc-4

I have a problem when running an MVC4 website from my visual studio debugger, if there are too many pages open, the ajax request takes a very long time to begin sending. The very strange thing is ...

Updating View Pager from Gallery's onItemClick

android imageview android-viewpager android-gallery

I have set up a View Pager and a Gallery. I would like to update my View Pager's ImageView from my gallery's OnItemClickListener and pass it the ImageView so that it will update so there will be a ...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.