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