lundi 14 décembre 2015

search filter check wrong checkbox Angular

I have problems with search filter and checkboxs.

I have list of checkbox with colors (pantons) ex.: "green, yellow, blue, red, pink, orange, black" and input with search. And when I write in the input "bl", color which are display are "blue" and "black". And then I have check them and click to save and in the database I had saved "green" and "yellow" (the 2 first colors on list).

And second problem is when I choose this colors and clear by backspace then the checked checkboxes are unchecked.

What I need to do to the colors right colors will added to database?

Added "checked" to the ng-model of chceckbox is not working.

Plunker is here.

My code:

<div class="row">
    <div class="col-lg-12">
        <div class="flat-panel">
            <div class="flat-panel-header">
                <h3 class="page-header">Choose color</h3>
                <div class="row">
                    <div class="form-group col-md-12">
                        <label for="nazwaRysunku">Search:  </label>
                        <input type="text" class="form-control" placeholder="Search..." ng-model="search.nazwa_pan" >
                    </div>
                </div>
            </div>
        <br>
            <div class="flat-panel-body">
            <div class="row">
                <div class="col-md-12" >
                    <div class="p-pantony" >
                        <label ng-repeat="panton in pPantons | filter : search track by $index" class="checkbox-inline" style="width: 170px; float: left; border-bottom: 10px solid rgb({{panton.R}},{{panton.G}},{{panton.B}}); margin:0 13px 13px 0;">
                            <input type="checkbox"  ng-model="article.pan[panton.nazwa_pan]" name="pantons" ng-true-value="' {{panton.nazwa_pan}}'" ng-false-value="'x'" > {{panton.nazwa_pan}} 

                        </label>
                         <label ng-repeat="panton in pgPantons | filter : search track by $index" class="checkbox-inline" style="width: 170px; float: left; border-bottom: 10px solid rgb({{panton.R}},{{panton.G}},{{panton.B}}); margin:0 13px 13px 0;">
                            <input type="checkbox"  ng-model="article.pan[panton.nazwa_pan]" name="pantons" ng-true-value="' {{panton.nazwa_pan}}'" ng-false-value="'x'" > {{panton.nazwa_pan}} 

                        </label>
                         <label ng-repeat="panton in innePantons | filter : search track by $index" class="checkbox-inline" style="width: 170px; float: left; border-bottom: 10px solid rgb({{panton.R}},{{panton.G}},{{panton.B}}); margin:0 13px 13px 0;">
                            <input type="checkbox"  ng-model="article.pan[panton.nazwa_pan]" name="pantons" ng-true-value="' {{panton.nazwa_pan}}'" ng-false-value="'x'" > {{panton.nazwa_pan}} 

                        </label>
                    </div> 
                </div>
            </div>    
            </div> <!-- .flat-panel-body -->
        </div>
    </div>
</div> <!-- /.row -->

Controllers:

appPokayoke.controller('CreateArticleCtrl', ['$scope', '$http','pantons','$routeParams', 'articles', '$timeout', '$location', '$filter', function ($scope, $http, pantons, $routeParams, articles, $timeout, $location, $filter, rangeFilter) {


        var drawingId = $routeParams.drawingId;
        var pyNumber = $routeParams.pyNumber;
        var divOne = $routeParams.divOne;
        var divTwo = $routeParams.divTwo;
        var divThree = $routeParams.divThree;

        $scope.pyNumber = $routeParams.pyNumber;
        $scope.date = $filter('date')(new Date(), 'dd-MM-yyyy');

        $scope.article = {
            "id_rys" : drawingId,
            "data_art" : $scope.date
        }; 


        pantons.getPPantons(function (pPantons) {
            $scope.pPantons = pPantons;            
        });

        pantons.getPgPantons(function (pgPantons) {
            $scope.pgPantons = pgPantons;
        });

        pantons.getInnePantons(function (innePantons) {
            $scope.innePantons = innePantons;            
        });


        $scope.saveArticleData = function (article, success) {

            success = success || function() {};

            $http.post('api/admin/articles/create/', {
                article : article, 
                nazwa_art : article.nazwa_art, 
                koloryPod : article.koloryPod, 
                koloryMie : article.koloryMie, 
                pan : article.pan

            }).success(function (errors){

                    if ( errors) {
                        $scope.errors = errors; 
                        console.log($scope.errors);
                    }
                    else
                    {
                        $scope.success = true;
                        $scope.article = article;   
                        var articleName = article.nazwa_art;

                        $timeout(function() {
                            $location.path('/drawings/'+ drawingId + '/' + pyNumber +'/' + divOne +'/' + divTwo +'/' + divThree + '/create/article/' + articleName);
                        }, 2000);
                    }


            }).error(function (){
                addedStatus = false;
                console.log('error API');
            });
        }

    }]);

Aucun commentaire:

Enregistrer un commentaire