javascript - 只显示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 的一部分

.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);
    };
});

更新

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，因此如果您能帮助我，我将不胜感激。

我的问题本身是:项目是否未选中并不重要，一旦刷新页面，所有项目将再次设置为checked = 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>