lundi 11 janvier 2016

how to retain checkbox values in angular after switching states ?

i have a table that is being created by a JSON structure , that table has a filter having checkboxes according to which we can select which all fields we want to see at a time in table , we can have 5 visible columns at a single time visible. the problem i am facing it when i select 5 different checkboxes to recreate a table , and after switching states the checked values does not gets retained . i want to retain the last checked values when i revisit that page .

this is the function inside a controller that creates full table after selecting default first 5 checkboxes:

function tablePopulate() {
            $scope.filteredLabel = [];
            $scope.unfilteredLabel = [];
            $scope.filteredData = [];
            console.log($scope.unfilteredLabel.length);
            label = FullTableRecord.getLabel(); //Get the full labels  in label[] array
            console.log("anki" + label);
            for (i = 0; i < label.length; i++) {
                var j = 0
                if (i < 5) {
                    $scope.unfilteredLabel.push({
                        label: label[i],
                        value: true,

                    });

                } else {
                    $scope.unfilteredLabel.push({
                        label: label[i],
                        value: false,
                    });
                }

            }
            $scope.filterRemCount=5;
            $scope.clicked = true;
            console.log("unfilterd label at 668");
            console.log($scope.unfilteredLabel.length);
            /*selectField() function called to check which field has been selecteds  */
            localData = TableData.get(); //Get the Complete set of data from TableData service
            $scope.cLoader = false;
            rePaintTable();

        }

this function checks which checkboxes are selected :

 $scope.selectField = function() {
            console.log("select field function called");
            count = 0;
            for (i = 0; i < $scope.unfilteredLabel.length; i++) {
                //console.log($scope.unfilteredLabel[i].value);
                if ($scope.unfilteredLabel[i].value) {
                    count++; //count variable contains the number of fields selected
                }
            }
            $scope.filterRemCount=count;
            console.log("Count value is:" + count);
            if (count > 4) {
                console.log("inside count >5")
                $scope.clicked = true;

            } else {
                console.log("inside count <5")
                $scope.clicked = false;
            }
            // console.log("$scope.clicked" + $scope.clicked);
            // console.log("$scope." + $scope.clicked);
        }

this function will get the data from complete set of data according to the set of fields selected by the user from the filter

function rePaintTable() {
        $scope.isFilterOpen = false;
        $scope.filteredData = [];
        $scope.filteredLabel = [];
        var tempFilterLabel= [];
        //console.log("inside rePaintTable function");

        for (i = 0; i < $scope.unfilteredLabel.length; i++) {
            if ($scope.unfilteredLabel[i].value) {

                console.log($scope.unfilteredLabel[i].label);
                tempFilterLabel.push($scope.unfilteredLabel[i].label);
                $scope.filteredLabel = tempFilterLabel;

                // $scope.filteredLabel.push($scope.unfilteredLabel[i].label);
            }
        }
        // console.log("Filtered Label");
        //console.log($scope.filteredLabel);
        console.log("Filtered Data");
        console.log($scope.filteredData);
        for (i = 0; i < localData.length; i++) {
            $scope.filteredData.push([]);
            for (j = 0; j < localData[i].length; j++) {
                if ($scope.unfilteredLabel[j].value) {
                    $scope.filteredData[i].push(localData[i][j]);
                }
            }

        }
         console.log("Filtered Data 2");
        console.log($scope.filteredData); this console prints the array of objects according to the checked values only.


    }




Aucun commentaire:

Enregistrer un commentaire