javascript - checkbox unchecking itself after angularjs filter applied -
this causes same item added array - used querying - potentially twice. when modal closed , opened again , filtering not used, fine (this because modals within html, ng-hide them on click). when item has been added, checkmark has been lost due filtering, checked again 2 of same items added. when unchecked both removed, unless last item in array, cannot removed (i'm aware slapdash logic). below relevant html , javascript code (famous last words).
html:
<div style="display: inline-block;" ng-controller="modalctrl"> <button ng-click="showmodal = !showmodal">entities</button> <div ng-init="showmodal=false"> <div class="modal fade in" aria-hidden="false" style="display: block;" ng-show="showmodal"> <div class="modal-dialog"> <div class="modal-content"> <strong>entities</strong> <div> <div> <input type="text" placeholder="search" ng-model="simplefilter"> <button type="button" ng-click="showmodal=false">ok</button> </div> </div> <br> <div ng-repeat="entity in entityarray | filter:simplefilter"> <label> <input style="display: inline-block; margin-top: 5px" type="checkbox" ng-model="entitychecked" ng-change="getentityfrommodal(entity, entitychecked)" /> <a>{{entity}}</a> </label> </div> </div> </div> </div> </div> </div> modal controller:
angular.module("app").controller("modalctrl", ["$scope", "sharedataservice", "getdataservice", function ($scope, sharedataservice, ngdialog, getdataservice) { $scope.entityarray = sharedataservice.getentityarray(); $scope.depotarray = sharedataservice.getdepotarray(); $scope.getentityfrommodal = function (entity, checked) { sharedataservice.setmodalentity(entity, checked); }; $scope.getdepotfrommodal = function (depot, checked) { sharedataservice.setmodaldepot(depot, checked); }; }]); sharedataservice (relevant methods):
angular.module("app").factory("sharedataservice", function () { var entityarrayservice = []; var depotarrayservice = []; var modalentity = []; var modaldepot = []; getentityarray: function () { return entityarrayservice; }, getdepotarray: function () { return depotarrayservice; }, setmodalentity: function (entity, checked) { if (!checked) { (var = 0; < modalentity.length; i++) { if (modalentity[i] === entity) { modalentity.splice(i, 1); } } } else { modalentity.push(entity); } }, setmodaldepot: function (depot, checked) { if (!checked) { (var = 0; < modaldepot.length; i++) { if (modaldepot[i] === depot) { modaldepot.splice(i, 1); } } } else { modaldepot.push(depot); } }, }); there other instances when dataservice methods called in main controller, these used array's length. if checkbox problem solved solved.
entitychecked not declared anywhere in javascript, each time filter, entitychecked reset, need make model repeater see , have access to.
<!-- entity in created child scope --> <div ng-repeat="entity in entityarray | filter:simplefilter"> <label> <input style="display: inline-block; margin-top: 5px" <!-- set checked value on 'entity' itself, retained --> type="checkbox" ng-model="entity.entitychecked" ng-change="getentityfrommodal(entity, entitychecked)" /> <a>{{entity}}</a> </label> </div>
Comments
Post a Comment