2017-09-28 2 views
0

私はすべてのアプリケーションの上にカスタム設計されたテーブルを持っているウェブサイト上で作業しています。すべてのテーブルには、チェックボックスチェック/チェック解除の共通機能があります。Anuglar 1.5.8ウェブサイトで共通のチェックボックス機能のチェック/チェックを解除する方法は?

私はこれを行うのに非常に簡単な方法を使用しました。 選択されたIDの配列を作成しています。 トグルで、配列にIdが存在するかどうかを確認してから、elseを削除します。 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 = []; 
    } 
} 

私はその他の詳細や他のコードを追加する必要があるなら、私に教えてください。

ありがとうございました。

+0

複数のチェックボックスグループがありますか?あるいは、その状態を変えなければならない単数のチェックボックスのグループですか? どちらの場合でも、サービスではなくコンポーネントを使用することを強くお勧めします。 –

+0

これらは、単一のグループのチェックボックスです。提案していただきありがとうございます。 –

答えて

1

ただ、このように、あなたが望むように、このような をメソッドを持つサービスを作成

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

について

+0

私はサービスで同様のメソッドを使用してこれを行うことができました。 –

+0

あなたは大歓迎です! – Macondo

関連する問題