This causes the same item to be added to the array - which is used for querying - potentially twice. When the modal is closed and opened again and filtering is not used, everything is fine (this is because my modals are simply within the HTML, I just ng-hide them on click). When an item which has already been added, but its checkmark has been lost due to filtering, is checked again two of the same items are added. When it is unchecked both are removed, unless it is the last item in the array, this cannot be removed (I'm aware this is my slapdash logic). Below is the relevant HTML and 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) {
for (var i = 0; i < modalEntity.length; i++) {
if (modalEntity[i] === entity) {
modalEntity.splice(i, 1);
}
}
} else {
modalEntity.push(entity);
}
},
setModalDepot: function (depot, checked) {
if (!checked) {
for (var i = 0; i < modalDepot.length; i++) {
if (modalDepot[i] === depot) {
modalDepot.splice(i, 1);
}
}
} else {
modalDepot.push(depot);
}
},
});
There are other instances when the dataservice methods are called in my main controller, but these are only used for the array's length. So if the checkbox problem is solved everything is solved.