Draz Draz - 3 months ago 15x
AngularJS Question

$scope variable with checkbox inconsistency

I am struggling with some

variables in my angularjs-app.

I want to visualize 'Modules' that have serveral 'Channels' and those channels can be hidden/visible. I want to hide channels in a channel-popup by double-clicking on that channel.

angular-Controller snippet:

$scope.dblclick = function(chid) {
$scope.chclicked = chid;
$scope.hidden = $scope.moduledata.channels[chid].hidden !== 0 ? true : false;
$scope.popupvisible = true;

$scope.popupok = function() {
$scope.moduledata.channels[$scope.chclicked].hidden = $scope.hidden === true ? 1 : 0;
$scope.popupvisible = false;

$scope.popupcancel = function() {
$scope.popupvisible = false;

$scope.closePopup = function() {
$scope.popupvisible = false;

Before showing the popup, I set (I try to) the current
value and
to have access to them when closing the popup.

The checkbox in the popup has

The problem now is that the hidden values in the
doesn't get updated/changed and
always keeps the last value of the checkbox in popup - for all channels.

works fine though.

I made a Plunk to visualize my problem.


Please look at the following Plunker based on your one.

ng-include created a new scope, that's the reason why you can't just use hidden in the ng-model in the popup template.

You need:


Edit 1

popup object has been created to store all information related to the popup including hidden variable.

$scope.popup = {
  visible: false,
  url: 'channeleditpopup.html',
  hidden: false

Next, in the popup template:


In the popupok function:

$scope.moduledata.channels[$scope.chclicked].hidden = $scope.popup.hidden ? 1 : 0;

In the dblclick function:

$scope.popup.hidden = false;