仅显示选中 = true 的元素

display only the elements with checked = true

本文关键字:true 元素 显示      更新时间:2023-09-26

我有一个项目列表,其中包含选中或取消选中的选项。

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

更新

服务.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,但是如何?或者我能做什么?我在这里阅读您的建议。

像这样的东西?

.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>