Anuglar 1.5.8如何检查/取消选中网站常用的复选框功能？

我正在一个网站上定制设计的表格遍布整个应用程序。所有表格都具有复选框检查/取消选中的常用功能。Anuglar 1.5.8如何检查/取消选中网站常用的复选框功能？

我已经使用了一种非常简单的方法来做到这一点。创建一个选定ID的数组。切换时，检查数组中是否存在Id，然后删除else add。然后在checkAll/uncheckAll上，推入数组中的所有id或清空数组。

此代码在每个有表格的页面的每个控制器中重复。

我在寻找的是一些帮助/建议，如何通过在某些服务/工厂中定义此代码来实现此功能，并且可以在整个应用程序中使用。

触发检查/取消：

function toggle(id) { 
    let index = vm.selectedIds.indexOf(id) 
    if(index >= 0) { 
     vm.selectedIds.splice(index, 1); 
    } 
    else { 
     vm.selectedIds.push(id); 
    } 
}

CheckAll/uncheckAll：

function checkUncheckAll() { 
    if(vm.selectedIds.length != vm.renderedList.length && vm.selectedIds.length <= vm.renderedList.length) { 
     vm.selectedIds = []; 
     angular.forEach(vm.renderedList,function(row){ 
      vm.selectedIds.push(row._id); 
     }); 
    } 
    else { 
     vm.selectedIds = []; 
    } 
}

让我知道如果我需要添加任何其他细节或任何其他代码。

谢谢。

来源

2017-09-28 Aman Gupta

是否有多个复选框组？还是它是一个单一的复选框组，其状态必须发生变化？在这两种情况下，我都强烈推荐在这里使用组件，而不是服务 –

这些是单数组复选框。感谢您的建议。 –

只需创建一个有方法的服务，只要你想，这样，

service('myservice', myservice); 
function myservice() { 
this.toggleAll = function(vm.selectedIds, vm.renderedList) { 
    if(vm.selectedIds.length != vm.renderedList.length && vm.selectedIds.length 
    <= vm.renderedList.length) { 
     vm.selectedIds = []; 
     angular.forEach(vm.renderedList,function(row){ 
      vm.selectedIds.push(row._id); 
     }); 
    } else { 
     vm.selectedIds = []; 
    } 
    }; 
}

，然后注入并使用在你需要它，像这样的服务：

controller('myController', myController); 
myController.$inject = ['myservice']; 

function myController(myservice) { 
var vm = this; 
vm.checkAll = checkAll; 
vm.selectedIds; 
vm.renderedList; 

checkAll = function(vm.selectedIds,vm.renderedList) { 
    myservice.toggleAll(vm.selectedIds,vm.renderedList); 
} 
}

关于

来源

2017-09-28 13:45:05 Macondo

谢谢我能够在服务中使用类似的方法做到这一点。 –

不客气！ – Macondo

Anuglar 1.5.8如何检查/取消选中网站常用的复选框功能？

回答

相关问题