搜索过滤器检查错误的复选框Angular

Question

我在搜索过滤器和复选框方面遇到问题。

我有带颜色（pantons）的复选框列表，例如：＆＃34;绿色，黄色，蓝色，红色，粉红色，橙色，黑色＆＃34; 并输入搜索。 当我在输入＆＃34; bl ＆＃34;中写入时，显示的颜色是＆＃34; 蓝色＆＃34;和＆＃34; 黑色＆＃34;。然后我检查它们并点击保存并在数据库中保存了＆＃34; 绿色＆＃34;和＆＃34; 黄色＆＃34; （列表中的2种第一种颜色）。

第二个问题是当我选择这种颜色并通过退格键清除时，选中的复选框将被取消选中。

我需要对颜色正确的颜色添加到数据库中吗？

已添加＆＃34;已检查＆＃34;到chceckbox的ng模型不起作用。

Plunker是here。

我的代码：

<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 -->

控制器：

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

    }]);

我想发布的对象必须如下：

    {
    "article": {
        "id_rys": "45",
        "data_art": "15-12-2015",
        "nazwa_art": "fun",
        "pan": {
            "P108": " P108",
            "P109": " P109"
        }
    },
    "nazwa_art": "fun",
    "pan": {
        "P108": " P108",
        "P109": " P109"
    }
}