Αngular - checkbox

[makisvisual]

Kαλησπέρα παιδιά φτιάχνω μια εφαρμογή στην οποια ο χρηστης πληκτρολογεί μια τοποθεσία και το place api της google του επιστρέφει 60 φωτογραφίες οι οποίες σχετίζονται με αυτην την φωτογραφία.

Οταν η google απαντάει στην κλήση μου μου στέλνει 60 objects το καθένα απο αυτα έχει 4 properties (img,type,name,etc)

Επειτα ανάλογα με τα  type τα οποία μου επιστρέφει το api εμφανίζω τα ανάλογα checkbox. Αν η απάντηση δηλαδη περιέχει 50 διαφορετικά types τοτε εμφανίζω 50 checkbox οπου κάθε ενα σχετίζεται με το αντίστοιχο type.

Το πρόβλημα το αντιμετωπίζω όταν κάνω uncheck τα checkbox μου. Αντι για να μου μειώνεται το περιεχόμενο των φωτογραφιών μου παραμένει στατικό.

 

Ο κώδικας για τα checkbox στην html ειναι

    <label id="checkboxes" ng-repeat="category in categories">
            
                <input type="checkbox" ng-model="checkboxValue" ng-change="change(category, checkboxValue)">{{category}}

                  
        </label>  

Ο κώδικας για τον controller μου είναι ο παρακάτω.

Το πρόβλημα ξεκινάει απο την γραμμή 75 εώς 87!!!

/*global angular */

app.controller('MainController', ['$scope', function ($scope) {

    google.maps.event.addDomListener(window, 'load', intilize);

    function intilize() {
        var autocomplete = new google.maps.places.Autocomplete(document.getElementById('txtautocomplete'));

        //Παίρνω όλες τις πληροφορίες της τοποθεσίας
        var place = autocomplete.getPlace();
 
        $scope.categories = [];
        $scope.deletedTypeList = [];
        $scope.checkboxValue = true;

        var service = new google.maps.places.PlacesService(document.createElement('div'));

        autocomplete.addListener('place_changed', function () {
            var place = autocomplete.getPlace();
            var lat = place.geometry.location.lat();
            var lng = place.geometry.location.lng();
            var location = new google.maps.LatLng(lat, lng);

            //ksana init ton pinaka otan allazo topothesia
            $scope.places = [];

            var request = {
                location: location,
                radius: '500',
                type: ''

            };

            service.nearbySearch(request, callback);
            
            // κάνω κλήση στο place api της για να πάρω φωτογραφίες

            function callback(results, status, pagination) {

                angular.forEach(results, function (place, index) {

                    var temp = {
                        'name': place.name,
                        'types': place.types,
                        'img': "../../myStyleFile/images/noAvailable.png"
                    };



                    if (place.photos != null) {

                        temp.img = place.photos[0].getUrl({
                            'maxWidth': place.photos[0].width,
                            'maxHeight': place.photos[0].height
                        });
                        //temp.img = place.photos[0].getUrl({'maxWidth': 200,'maxHeight': 200});

                    }
  
                    
                    $scope.places.push(temp);
                    console.log($scope.places);
                    angular.forEach(place.types,function(value,key){
                                    
                        if(!$scope.categories.includes(value))
                            $scope.categories.push(value);
                            
                        })
                    
                    //εδώ υπάρχει το πρόβλημα
                    //αρχικά προσθέτω στον πίνακα deletedTypeList όλες τις τιμές των checkbox τα οποία από 
                    //checked μετατρέπονται σε unchecked
                    
                    $scope.change = function (checkboxType, value) { //το checkboxType περιέχει τoν τύπο του checkbox
                        if (!value) {
                            $scope.deletedTypeList.push(checkboxType); 
                           
                            angular.forEach($scope.places,function(value,key){ //εδώ κάνω τον έλεγχο ώστε να αρχίσω να αφαιρώ όποιες εικόνες       
                             if($scope.deletedTypeList.includes(value.types)) //περιέχουν τύπο ίδιο με αυτόν που περιέχει η deletedTypeList 
                                $scope.places.splice(value);       
                        })

                            console.log($scope.places);
                            
                        } else {
                            $scope.deletedTypeList.splice($scope.categories.indexOf(checkboxType, 1)); 
                        }
                    };
                    
                    
                    
                });
                
               
              
                

                $scope.$apply();
            
                if (pagination.hasNextPage)
                    pagination.nextPage();

            }

        })
    }


}]);

Ευχαριστώ εκ των προτέρων  

[anon667]

Λίγο long shot, αλλά με callback παρόμοια φάση που είχα πρόβλημα με update, χρησιμοποίησα το παρακάτω όταν έφτανε στο τέλος η callback κλήση

 

 

$scope.$applyAsync();

 

Ίσως λύσει και το δικό σου πρόβλημα. Good luck!

[makisvisual]

Λίγο long shot, αλλά με callback παρόμοια φάση που είχα πρόβλημα με update, χρησιμοποίησα το παρακάτω όταν έφτανε στο τέλος η callback κλήση

$scope.$applyAsync();

Ίσως λύσει και το δικό σου πρόβλημα. Good luck!

 

Δεν είναι αυτό το θέμα(το πρόσθεσα αυτο που μ ειπες )..το πρόβλημα βρίσκεται  στις σειρές 79-81 στην for each...εκει δεν δεν γίνεται η διαγραφή! Ευχαριστώ πάντως που ασχολήθηκες

[Predatorkill]

$scope.places.splice(value);

Νομιζω το προβλημα σου ειναι στο splice, δινεις μονο value και δεν δινεις index. ειμαι στο κινητο δε μπορω να διαβασω καλα το κωδικα, ενδεχομενως λεω μαλακιες.

[makisvisual]

ριξτον μια ματιά οταν είσαι και απο pc pls  

[Predatorkill]

Το change detection δουλευει σωστα; εχεις παρει το output του array σε comsole log να δεις αν οντως πιανει το κλικαρισμα του checkbox;

[makisvisual]

Το change detection δουλευει σωστα; εχεις παρει το output του array σε comsole log να δεις αν οντως πιανει το κλικαρισμα του checkbox;

 

ναι αυτο το έχω τσεκάρει...οποτε πατάω τα checkbox περνάει η αντίστοιχη στιγμή του checkbox στον πίνακα deletedTypeList .

[egoeimai1]

Σαν πρώτη παράμετρο στη function στο ng-change δεν δίνεις το type, αλλά όλο το object.  Θέλει αλλαγή σε category.type ή όπως αλλιώς ονομάζεις το property.  Βασικά μια παράμετρο χρειάζεσαι εκει, την checkboxValue, η άλλη δε σου χρειάζεται.

 

Αν τώρα θέλεις οπωσδήποτε και τις 2 παραμέτρους,  τοτε μέσα στην deletedTypeList πρέπει να πουσάρεις το checkboxType.type

[alou]

Άσχετα με το ζητούμενο, κάτι σε 

$scope.change = function (checkboxType, checkboxValue) ...

και 

 angular.forEach($scope.places,function(place, placeIndex)...

θα ήταν πιο εύκολο να το παρακολουθήσεις και να καταλάβεις τι γίνεται στην κονσόλα. Τώρα μέσα στο change event έχεις nested foreach με ίδια παράμετρο το value, είσαι σίγουρος για τις τιμές τους;

[Predatorkill]

Τελικα εβγαλες ακρη; δοκιμασες αυτα που ειπαν ο egoeimai και ο alou; Στο change detection ειναι μαλλον το προβλημα.

ναι αυτο το έχω τσεκάρει...οποτε πατάω τα checkbox περνάει η αντίστοιχη στιγμή του checkbox στον πίνακα deletedTypeList .

το splice επιστρεφει νεο array, κανε console log το array να δεις αν με το τσεκ στο checkbox επιστρεφει νεο-σωστο array ωστε να ψαχτεις προς αυτη τη κατευθυνση.

[makisvisual]

Αρχικά ευχαριστώ για το ενδιαφέρον! Απο σήμερα και για τις επόμενες δυο μέρες θα βρίσκομαι εκτος Ελλάδας χωρίς υπολογιστή.Με το που φτασω θα τρέξω αυτα που μου είπατε και θα σας ενημερώσω!

[makisvisual]

Επανήλθα και πάλι! πειραματίστκα με αυτα που μου είπατε ωστόσο δεν ηταν εκει το θέμα! επισυνάπτω τον κώδικα!πλεον διαγράφω κανονικά objects ωστόσο δεν διαγράφω τα object που θέλω!

παρακάτω υπαρχει το κομμάτι που άλλαξα αλλα και που εξακολουθεί να υπάρχει το πρόβλημα!

Eπισης επισυνάπτω και φωτογραφίες απο την consola όπου απεικονίζεται η διαγραφή όλου του πίνακα!

//το key είναι to index του κάθε checkbox
//το value είναι η κατάσταση του check/uncheck
//categor είναι το τί γράφει το συγκεκριμένο checkbox που εχει πατηθεί (πχ school,taxi_station)

$scope.change = function (key, value,categor) { 
                        if (!value) {

                         //όποιο checkbox κάνω uncheck περνάω το string(τον τύπο του δηλαδή) μεσα
                        // στην λίστα deletedTypeList
                            $scope.deletedTypeList.push(categor);
                          
                        //κάνω ένα forEach για την λίστα $scope.places που περιέχει όλες τις φωτογραφίες(τα object
                        // δηλαδη που θελω να διαγράψω.

                            angular.forEach($scope.places,function(value,indexkey){ 
       
                       //εδω πριν υπηρχε προβλημα.το παρακάτω if δεν ήταν ποτε true γιατι πολύ απλα
                       // χρησιμοποιούσα την εντολή iclude για να ρωτήσω αν μέσα στην λίστα $scope.places.type περιέχεται 
                       //όλη η deletedTypeList, για αυτο έκανα δευτερο foreach για να παίρνω τα key values ης deletedTypeList.
                   

                               angular.forEach($scope.deletedTypeList,function(item,key){ 
                                if(value.types.includes($scope.deletedTypeList[key])){  
                                   
                                    //πλεον επιτυγχάνεται η διαγραφή!ωστόσο αντι για να μου διαγράψει τις photo που ο τύπος τους ταυτίζεται 
                                   // με τις τιμές της deletedTypeList, μου διαγράφει όλες τις φωτογραφίες του πίνακα $scope.places.
                                     $scope.places.splice(value);
                                   
                                }})      
                        })

                        
                            
                        } else {
                            $scope.deletedTypeList.splice($scope.categories.indexOf(checkboxType, 1)); 
                        }
                    };  

και ο html κωδικάς μ 

<div id="checkDiv">
              <label id="checkboxes" ng-repeat="category in categories">
            
                <input type="checkbox" ng-model="checkboxValue" ng-change="change($index, checkboxValue,category)">{{category}}
                  
        </label>  
           </div>  

[alou]

Δεν έχεις διορθώσει αυτά που είπαμε όμως. Προσπάθησε να φτιάξεις μια συνάρτηση στην οποία οι παράμετροι θα περιλαμβάνουν όλα όσα χρειάζεται για να κάνει ότι υπολογισμούς χρειάζεται και ότι nested function ή loop υπάρχει θα έχει διαφορετικά ονόματα στις παραμέτρους. Και βέβαια, καλό θα ήταν να επιστρέφει κάτι χωρίς side effects που θα χρησιμοποιήσεις μετά, για να είναι πιο ξεκάθαρο το τι συμβαίνει.

 

Δηλαδή

$scope.change = function (key, ***value***,categor) { 
  if (!value) {

    $scope.deletedTypeList.push(categor);
    angular.forEach($scope.places,function(***value***,indexkey){ 

       angular.forEach($scope.deletedTypeList,function(item,key){ 
        if(value.types.includes($scope.deletedTypeList[key])){  

             $scope.places.splice(value); // ΕΔΩ τι περιμένεις να έχει το value? 
           
        }
      })
    })
      
  } else {
      $scope.deletedTypeList.splice($scope.categories.indexOf(checkboxType, 1)); 
  }
};  

Το ίδιο ισχύει και με το key, πιθανώς και κάτι άλλο που δεν πρόσεξα. 

 

Να θυμάσαι ότι το λάθος δεν βρίσκεται στον κώδικα αλλά σε αυτό που φαντάζεσαι ότι θα κάνει ο κώδικας που έχεις γράψει, εκεί πρέπει να γίνει η "διόρθωση" σε πρώτη φάση.

[makisvisual]

Τα κατάφερα..... για οποιον ενδιαφέρεται και εχει παρόμοιο πρόβλημα ο κώδικας ειναι ο παρακάτω....ευχαριστώ όσους ασχοληθήκατε με το θέμα μου.

 

Σιγουρα είναι τσαπατσούλικος και εχει πολλές μεταβλητές που δεν χριάζονται(τις οποίες θα διαγράψω)

  $scope.change = function (value,categor) { 
                        if (!value) {
                            $scope.deletedTypeList.push(categor);
                            
            
                            angular.forEach($scope.places,function(value,indexkey){        
                               angular.forEach($scope.deletedTypeList,function(item,key){ 
                                if(value.types.includes($scope.deletedTypeList[key])){  
                                    storeObj.push(value);
                                    $scope.places.splice(indexkey,1);
                            
                                }})      
                        })

                        
                            
                        } else {
                        
                            var findIt = $scope.deletedTypeList.indexOf(categor);
                            $scope.deletedTypeList.splice(findIt,1);
                            
                         
                            angular.forEach($scope.places,function(valuePlace,indexkey){ 
                               angular.forEach(storeObj,function(value,ind){
                                   if(!$scope.places.includes(value))
                                   $scope.places.push(value);        
                               })
                        })
                        }
                    };