There is a list of objects, you need to follow the changes in their properties. Since the server is not configured for sockets, it is necessary to use cyclic requests, that is, I perform the function from the controller every second, but this causes strange program behavior, selected checkboxes fly off.
A function that repeats:

function getDeviceList() { var data = { UserSID: store.get('currentUserSID'), Limit: 100, StartToken: 0 }; DeviceService.GetDeviceList(data) .then(function(response) { vm.devices = response.data.Device; }, function(error) { vm.error = error.data; }) }; setInterval(getDeviceList, 1000);

Initialization in html:

 <div class="part" ng-init="vm.getDeviceList()"> <div ng-repeat="filt in filters"> <h1 ng-click="show =! show" class="part__title " ng-class="{'is-active': !show }" ng-hide="!(vm.devices|{{filt.filterName}}).length">{{filt.name}} <label> <span class="part__multi-check"> <input class="part__all-check" type="checkbox" ng-model= "masterChecked" ng-click = "vm.toggleAll(itemsResults, masterChecked)" ng-checked = "vm.getCheckedCount(itemsResults) == itemsResults.length && itemsResults.length > 0"> <svg class="icon part__icon--all-check part__icon--check"> <use xlink:href="#icon-сheckmark"></use> </svg> <input class="part__intermed-checkbox" type="checkbox" ng-checked ="vm.getCheckedCount(itemsResults) < itemsResults.length && vm.getCheckedCount(itemsResults) != 0 && itemsResults.length > 0"> <span class="part__intermed-check"> </span> </span> </label> </h1> <div class="part__content " ng-class="{'is-active': !show }" ng-hide="!(vm.devices|{{filt.filterName}}).length"> <div class="part__item" ng-repeat="item in (vm.devices|applyFilter: filt.filterName) | filter: query as itemsResults" ng-click="choose =! choose "> <svg class="icon part__icon is-active{{item.HealthStatus}}" ng-class="{'is-checked': choose} "> <use xlink:href="{{'#icon-'+ item.Name}}"></use> </svg> <p class="part__text" ng-bind="item.Name"> <br>(00:AE:02:2C) </p> <label class="part__check"> <input type="checkbox" ng-model="item.isChecked" value="{{item.Name}}" class="part__radio" /> <span class="part__checkmark"> <svg class="icon part__icon--check" > <use xlink:href="#icon-сheckmark"></use> </svg> </span> </label> </div> </div> </div> </div>
  • attention to the question: why should not fly checkboxes? information about the check is stored in objects from the array, you change it to a new array in which the elements do not have the isChecked property and the view is regularly updated view - Grundy
  • but about this ng-hide="!(vm.devices|{{filt.filterName}}).length" even had the same question ru.stackoverflow.com/questions/549446/… - Grundy
  • with this ng-hide = "! (vm.devices | {{filt.filterName}}). length" there are no problems, the solution is applied below in the code. - I.Krainiev
  • For the question itself, see the first comment - Grundy

1 answer 1

The best option is to implement it as a service that will verify data from requests, and generate the corresponding events.

 angular.module('example').factory('observeDevices', observeDevices); observeDevices.$inject = ['DeviceService','$rootScope']; function observeDevices(DeviceService,$rootScope) { var POLL_TIMEOUT = 1000, isObserve = null, devices = []; return ({ observe:observe, unobserve:unobserve }) function observe(){ if (isObserve !== null && !isObserve) return isObserve = null; DeviceService .GetDeviceList({ UserSID: store.get('currentUserSID'), Limit: 100, StartToken: 0 }) .then(function(response){ diff(response.data); setTimeout(observe,POLL_TIMEOUT); }, function(error) { vm.error = error.data; setTimeout(observe,POLL_TIMEOUT); }) } function unobserve(){ isObserve = false; } function diff(){ //Тут проверяем наличие девайсов в devices, в зависимости от этого генерируем события $rootScope.$broadcast('devices:add',device); $rootScope.$broadcast('devices:remove',device); } } //Где то в контроллере: observeDevices.observe(); var addDeviceObserver = $rootScope.$on('devices:add',addDevice); //Добавить device в vm.devices var removeDeviceObserver = $rootScope.$on('devices:remove',removeDevice); //Удалить device из vm.devices Отписываемся от событий $scope.$on('$destroy',function(){ observeDevices.unobserve(); addDeviceObserver(); removeDeviceObserver(); });

  • and how it will help in the question? - Grundy
  • Let's argue. As I understand from the code, you replace the entire array in the controller. You need to make a certain list of devices in which devices can be deleted / appear in real time. I suggest you take out the logic with the receipt / verification of devices in a separate service, throwing an approximate architecture. And in the controller only handle events, and depending on their types, remove devices from the list, or add them. This method will not restart all data, the code will be concise, the logic that should not be present in the controller, rendered to the service. - Petr Chalov
  • firstly, I am not the author of the question, secondly, the description of what the code does should be immediately in the answer, and not in the comment, thirdly, if there is already a service for storing devices, why do another? - Grundy
  • Thank you, your answer helped me with this problem! - I.Krainiev