Draz Draz - 4 months ago 17
AngularJS Question

$scope variable with checkbox inconsistency

I am struggling with some

$scope
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
'hidden'
value and
channel-id
to have access to them when closing the popup.

The checkbox in the popup has
ng-model="hidden"
set.

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

The
$scope.chclicked
works fine though.

I made a Plunk to visualize my problem.

Answer

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:

ng-model="moduledata.channels[chclicked].hidden"

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:

ng-model="popup.hidden"

In the popupok function:

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

In the dblclick function:

$scope.popup.hidden = false;