Access controller variables in methods dynamically

Question

I have a controller in angular where there is a huge form split in cards. So each time a user picks a title, the card for that section shows (ex. name parts, address parts, contact data, college data, work data, etc).

The relevant code for doing that with only two sections is this:

angular.module('controllers', [])
.controller('EditUserController', function($scope, $state) {

  $scope.mustShowName = false;
  $scope.mustShowContact = false;

  $scope.toogleShowContact = function() {
    if ($scope.mustShowContact) {
      $scope.mustShowContact = false;
    } else {
      $scope.mustShowContact = true;
    }
  };
  $scope.toogleShowName = function() {
    if ($scope.mustShowName) {
      $scope.mustShowName = false;
    } else {
      $scope.mustShowName = true;
    }
  };
});

But there are various cards. There is a way of refactoring that in something like this?:

$scope.toogleSection = function(section) {
  if (section) {
    section = false;
  } else {
    section = true;
  }
};

...

$scope.toogleSection($scope.mustShowName);

If I try it, it doesn't work and doesn't throw errors, so I think it is just copying the variable and not referencing the original one.

Ori Drori · Accepted Answer · 2015-07-29 20:41:19Z

1

When you ask for $scope.mustShowName you just get the value and not the reference of the property - ie true or false. Instead pass the section name as a string, and refer to the property in the scope using the name.

btw - A better idea would be to create a directive that encapsulates the behavior, and will help you stays DRY.

$scope.toogleSection = function(sectionName) {
  if ($scope[sectionName]) {
    $scope[sectionName] = false;
  } else {
    $scope[sectionName] = true;
  }
};

$scope.toogleSection('toogleShowName');

answered Jul 29, 2015 at 20:41

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jorge Sampayo Over a year ago

this is exactly what I was looking for!

yvesmancera · Accepted Answer · 2015-07-29 20:40:41Z

1

You can refactor it so you can send the name of the property as a parameter to the function, like this:

$scope.toggleSelection = function(sectionName) {
  $scope[sectionName] = !$scope[sectionName];
};

answered Jul 29, 2015 at 20:40

yvesmancera

2,9255 gold badges26 silver badges33 bronze badges

Comments

Jess Patton · Accepted Answer · 2015-07-29 20:42:26Z

1

You can use a ng-if="show" for the detailed part of the card. Then do a ng-click="show = !show". BAM! you have a toggle on touch that will show and hide whatever you put the ng-if on. Here is a example from a app I made.

<div class="item" ng-show="directions">
    <!--directions go here-->
</div>
    <div style="text-align: center; background-color:#284f9a;" class="item" ng-click="directions = !directions">
        <p style="color: white;" ng-if="directions == false">See Directions:</p>
        <p style="color: white;" ng-if="directions == true">Close Directions:</p>
</div>

with this I can show and hide the directions and change what the show/hide button says. This also works really well with ng-repeat and only toggles the item you click on.

answered Jul 29, 2015 at 20:42

Jess Patton

2,4861 gold badge18 silver badges26 bronze badges

1 Comment

Jorge Sampayo Over a year ago

this looks a lot more angular-style! will try it!

Collectives™ on Stack Overflow

Access controller variables in methods dynamically

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related