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如何檢查/取消選中網站常用的複選框功能？

回答

相關問題