仅显示选中 = true 的元素
display only the elements with checked = true
我有一个项目列表,其中包含选中或取消选中的选项。
<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>
相关文章:
- 指令的模板必须只有一个根元素:With restrict E&替换true
- Jquery:当两个或多个条件为true时,选择一个元素
- 检查一个元素是否有一个类与另一个类总是返回true
- 仅显示选中 = true 的元素
- Jquery-(ajax async:true)元素大小没有响应
- contenteditable=true元素的文本建议
- 为什么当事件变为“true”时,我的 JQuery 函数没有在克隆的元素上触发
- 延迟似乎不会在元素上的 Stop(true, true) 之后延迟
- replace:true 如何与元素指令一起使用
- 如何选择两个元素的文本与内容可编辑 = true
- 带有 contenteditable=true 的 pre 标记 - 元素的 text() 内容中不会保留新行
- 无法手动将 DIV 元素上的可见性设置为 true.“TH:IF”问题
- 如果条件为 true,则向父元素添加类
- 如果两个元素使用jquery中的运算符具有相同的类,则返回true
- ng使用内联编辑重复,如何使第一个(或最后一个)元素的editmode=true
- 查找元素是否只包含一个元素,如果为true则隐藏父元素
- 当超过0%的元素在视口/窗口中时返回true
- 当将两个变量设置为相同的dom元素时,Jquery语句的值不为true
- 应该在附加克隆元素时使用clone(true),还是使用on()和clone(false)
- 插入符号行为在可满足的true元素内和可满足的false元素旁边