Angular - how to concat var name

Question

I just started to learn Angular, and I tried to make concat var name so I can control it dynamically.

This is what I tried -

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunc(1)">Click Me!</button>

<div ng-show="showMe1">
    <h1>Menu:</h1>
    <div>Pizza</div>
    <div>Pasta</div>
    <div>Pesce</div>
</div>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.showMe1 = false;
    $scope.myFunc = function(x) {
        var nametocng = 'showMe'+x;
        //var nametocng = $parse("showMe"+x);  // - I tried this also
        $scope.nametocng = !$scope.nametocng;
    }
});
</script>

In the end, I want to make multiple Toggles, but I want one function for all of them. and then, every button will handle one toggle — J. Doe, Mar 29 '17 at 07:18

Suren Srapyan · Answer 1 · 2017-03-29T07:25:15.363

1

If you have a dynamic variable name, you need to access via [] syntax. It will evaluate the variable's value and use that value as a property name.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunc(1)">Click Me!</button>

<div ng-show="showMe1">
    <h1>Menu:</h1>
    <div>Pizza</div>
    <div>Pasta</div>
    <div>Pesce</div>
</div>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.showMe1 = false;
    $scope.myFunc = function(x) {
        var nametocng = 'showMe'+x;
        //var nametocng = $parse("showMe"+x);  // - I tried this also
        $scope[nametocng] = !$scope[nametocng];
    }
});
</script>

edited Mar 29 '17 at 07:25

answered Mar 29 '17 at 07:16

Suren Srapyan

66,568
14
114
112

When I access var with '[]' - it gives me access to the "children"-vars? Do you doc of that? It's really interesting.. – J. Doe Mar 29 '17 at 07:19
I mean - if name="bla"; so - > $scope[name] === $scope.bla? – J. Doe Mar 29 '17 at 07:23
1

Yes you are right. It evaluates the expression. http://stackoverflow.com/questions/17189642/difference-between-using-bracket-and-dot-notation – Suren Srapyan Mar 29 '17 at 07:23

Sravan · Accepted Answer · 2017-03-29T07:46:47.493

use $scope[variable] for dynamic.

From your comment: In the end, I want to make multiple Toggles, but I want one function for all of them. and then, every button will handle one toggle

You can use ng-repeat for button to handle different menu's

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-repeat="button in array"  ng-click="myFunc(button)">Click Me!</button>

<div ng-show="showMe1">
    <h1>Menu:</h1>
    <div>Pizza1</div>
    <div>Pasta1</div>
    <div>Pesce1</div>
</div>

<div ng-show="showMe2">
    <h1>Menu:</h1>
    <div>Pizza2</div>
    <div>Pasta2</div>
    <div>Pesce2</div>
</div>
{{nametocng}}

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.array = [1,2];
    $scope.firstName = "John";
    $scope.lastName = "Doe";
     
    $scope.myFunc = function(x) {
     angular.forEach($scope.array, function(value, key){
       $scope['showMe'+value] = false
});
        var nametocng = 'showMe'+x;
        //var nametocng = $parse("showMe"+x);  // - I tried this also
        $scope[nametocng] = !$scope[nametocng];
    }
});
</script>

</body>
</html>

Please run the above snippet

Here is a DEMO

How can I make it toggle just one? I mena - if I press the 1st and then the 2nd - the 1st will fold — J. Doe, Mar 29 '17 at 07:30
Yeah, I tought about this.. but if I have a lot of toggles it will be quite long.. Isn't a way to connect between all of the toggles so they will be depends on each other? — J. Doe, Mar 29 '17 at 07:41

score 0 · Answer 3 · answered Mar 29 '17 at 07:28

Try using this

you have keep condition on click and check against concat string

Js code

    var app = angular.module('myApp', []);

    app.controller('ctrl', function($scope) {
      $scope.showMe1 = false;
      $scope.nametocng = 'showMe1';
      $scope.myFunc = function(x) {
        var nametocng = 'showMe' + x;
        $scope.showMe1 = $scope.nametocng === nametocng; // result will bool
      }
    });

HTML

    <div ng-app='myApp'>
      <div ng-controller='ctrl'>
        <button ng-click="myFunc(1)">Click Me!</button>
        {{showMe1}} {{nametocng}}
        <div ng-show="showMe1">
          <h1>Menu:</h1>
          <div>Pizza</div>
          <div>Pasta</div>
          <div>Pesce</div>
        </div>
      </div>
    </div>

Jsfiddle link

Angular - how to concat var name

3 Answers3