отображать только элементы с checked = true

Question

У меня есть список элементов с возможностью проверки или снятия флажка.

<ion-item ng-repeat="sport in sports" 
      ng-click="toggleSportSelection(sport)"> 
    {{:: sport.name}} 
    </ion-item> 

, если эти элементы бесконтрольно вы не можете увидеть их здесь

<div ng-show="sport.checked" ng-repeat="sport in sports"> 
     {{sport.name}} 
</div> 

эти элементы были сохранены в БД каждый раз, когда вы сняли их.

Причина, по которой я здесь, заключается в том, что поведение элементов по умолчанию - checked = true, поэтому не имеет значения, сохранены ли они в БД, если вы обновите страницу, все элементы настроены на checked = true еще раз ,

Итак, что я могу сделать, чтобы избежать этого поведения и что приложение распознает, когда элементы не отмечены или отмечены?

это часть контроллера

.controller('SportsController', function($scope, SportsFactory, 
               AuthFactory) { 

    SportsFactory.getSportChecked(customer).then(function(sportChecked) { 
    _.each(sports, function(sport) { 
     var intersectedSports = _.intersection(sport.id, sportChecked), 
      checkedSportObjects = _.filter(sport, function(sportObj) { 
      return _.includes(intersectedSports, sportObj); 
     }); 
     _.each(checkedSportObjects, function(sport) { 
      $scope.sports.push(sport); 
      }); 
     }); 

    //here is the part where the default behavior is checked = true 

     if (sports.length) { 
     $scope.sports = _.map(sports, function(sport) { 
      sport.checked = true; 
      return sport; 
     }); 
     } 

    $scope.toggleSportSelection = function(sport) { 
     var params = {}; 
     params.user = $scope.customer.customer; 
     params.sport = sport.id; 
     sport.checked = !sport.checked; 
     SportsFactory.setSportChecked(params); 
    }; 
}); 

UPDATE

service.js

setSportChecked: function(params) { 
    var defer = $q.defer(); 
    $http.post(CONSTANT_VARS.BACKEND_URL + '/sports/checked', params) 
    .success(function(sportChecked) { 
     LocalForageFactory.remove(CONSTANT_VARS.LOCALFORAGE_SPORTS_CHECKED, params); 
     defer.resolve(sportChecked); 
     }) 
     .error(function(err) { 
     console.log(err); 
     defer.reject(err); 
     }); 
    return defer.promise; 
    }, 

и часть NODEJS

sportChecked: function(params) { 
    var Promise = require('bluebird'); 
    return new Promise(function(fullfill, reject) { 
     console.time('sportChecked_findOne'); 
     SportSelection.findOne({ 
     user: params.user 
     }).exec(function(err, sportChecked) { 
     console.timeEnd('sportChecked_findOne'); 
     var newSport; 
     if (err) { 
      reject(new Error('Error finding user')); 
      console.error(err); 
     }else if (sportChecked) { 
      newSport = sportChecked.sport || []; 
      console.log(newSport); 
      console.time('sportChecked_update'); 
      if (_.includes(sportChecked.sport, params.sport)) { 
      console.log('Sport already exists'); 
      console.log(sportChecked.sport); 
      sportChecked.sport = _.pull(newSport, params.sport); 
      // sportChecked.sport = _.difference(newSport, params.sport); 
      console.log(sportChecked.sport); 
      }else { 
      newSport.push(params.sport); 
      sportChecked.sport = newSport; 
      } 
      SportSelection.update({ 
      user: params.user 
      }, 
      { 
      sport: newSport 
      }).exec(function(err, sportCheckedUpdated) { 
      console.timeEnd('sportChecked_update'); 
      if (err) { 
       reject(new Error('Error on sportChecked')); 
      }else { 
       fullfill(sportCheckedUpdated); 
      } 
      }); 
      if (sportChecked.sport) { 
      sportChecked.sport.push(params.sport); 
      console.log('New sport added'); 
      }else { 
      sportChecked.sport = [params.sport]; 
      } 
     }else { 
      console.time('sportChecked_create'); 
      SportSelection.create({ 
      sport: [params.sport], 
      user: params.user 
      }).exec(function(err, created) { 
       console.timeEnd('sportChecked_create'); 
       if (err) { 
       reject(new Error('Error on sportChecked')); 
       }else { 
       fullfill(created); 
       } 
      }); 
     } 
     }); 
    }); 
    }, 

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

Моя проблема: это не имеет значения, если элементы не отмечены, как только вы обновите страницу, все элементы будут настроены на check = true еще раз.

Кто-то говорит, что я могу использовать _.difference, но как? или что я могу сделать? Я здесь, чтобы прочитать ваши предложения.

Answer 1

Что-то вроде этого?

.controller('SportsController', function($scope, SportsFactory) { 
    // get a list of all sports, with default value false 
    SportsFactory.getAllSports().then(function(sports){ 
    $scope.sports = sports; 
    // set all items to unchecked 
    angular.each($scope.sports, function(sport) { 
     sport.checked = false; 
    }); 

    // get a list of checked sports for customer 
    SportsFactory.getCheckedSports(customer).then(function(checkedSports) 
    { 
     // set the sports in your list as checked 
     angular.each(checkedSports, function(checkedSport){ 
     var sport = _.findWhere($scope.sports, {id: checkedSport.id}); 
     sport.checked = true; 
    }); 

    }); 

    $scope.toggleSportSelection = function(sport) { 
    // do your toggle magic here 
    }; 
}); 

На ваш взгляд использовать фильтр:

<div ng-repeat="sport in sports | filter:{checked:true}"> 
{{sport.name}} 
</div>