how to use dynamic variables on ng-click angular?

Question

Well, I don't know how I can use "dynamic" variables on ng-click attribute. In this case, i want update variable from reference in ng-click ng-if etc.

My idea is update variables from reference and without create function to update this.

Controller:

$scope.elements = [
    //...
    {
        age:20,
        dynamicallyUpdateVariableWithFollowingName:"age"
    }
    //...
];

View:

<div ng-repeat="element in elements">
    <a href="" ng-click="element.dynamicallyUpdateVariableWithFollowingName = 27 ">Update AGE</a>
    <h1>You age is {{element.age}}</h1>
</div>

So, i don't want use this method:

controller:

$scope.elements = [
    //...
    {
        age:20,
        dynamicallyUpdateVariableWithFollowingName:"age"
    }
    //...
];
$scope.update = function( varname , value ){ $scope[varname] = value;}

html:

<div ng-repeat="element in elements">
    <a href="" ng-click=" update(' dynamicallyUpdateVariableWithFollowingName', 27) ">Update AGE</a>
    <h1>You age is {{element.age}}</h1>
</div>

Thanks!

I don't recommend you to write code like "variable = value" in a ng-click, you should call a method defined in the controller. Without that, you may have problems with the refresh of the view, because only changes on the scope in which you are will be repercuted (and not the controller scope). And the answer is "element[element.aliasToAttribute] = value" — anotherdev
– anotherdev, Commented Aug 10, 2016 at 15:48
please just say what you actually wanna do, can't understand a thing from your code . — Sachin
– Sachin, Commented Aug 10, 2016 at 16:06

Dharman · Accepted Answer · 2020-02-18 20:36:21Z

1

So, your question is that you want to update your data without using any function, means you don't want to use controller to update it.

So it's quite simple...

This is your .js (controller code)

$scope.elements = [
    {
        age: 20,
        dynamicallyUpdateVariableWithFollowingName: 'age'
    }
];

Html

<div ng-repeat="element in elements track by $index">
  <a href="" ng-click="element.age = 21">Update Age</a>
  <h1>Your age is {{element.age}}</h1>
</div>

edited Feb 18, 2020 at 20:36

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Aug 12, 2016 at 8:01

Surjeet Bhadauriya

7,2223 gold badges39 silver badges54 bronze badges

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

Comments

Laurianti · Accepted Answer · 2016-08-10 15:49:23Z

0

$scope.elements = [
    {
        age:20,
        dynamicallyUpdateVariableWithFollowingName:"age"
    }
];

<div ng-repeat="element in elements">
    <a href="" ng-click="element[element.dynamicallyUpdateVariableWithFollowingName] = 27 ">Update AGE</a>
    <h1>You age is {{element.age}}</h1>
</div>

answered Aug 10, 2016 at 15:49

Laurianti

9751 gold badge6 silver badges20 bronze badges

Comments

Ali Adravi · Accepted Answer · 2016-08-10 16:17:06Z

0

I could not understand your dynamic variable concept but see this if it match your case

$scope.elements = [  {  age:17, Name:"age1" },
                     {  age:24, Name:"age2" },
                     {  age:33, Name:"age3" }];

$scope.changeage = function(name, age){
   angular.forEach($scope.elements, function(value, key) {
      if(value.Name == name){
        value.age = age;
      return;
    }
  });
}

Your HTML:

<div ng-repeat="element in elements">
    <a href="" 
       ng-click="changeage('age' +($index +1) , ($index +1) * 20)">
         Update AGE</a>
    <h1>You age is {{element.age}}</h1>
</div>

See the fiddle

edited Aug 10, 2016 at 16:17

answered Aug 10, 2016 at 15:57

Ali Adravi

23k9 gold badges93 silver badges97 bronze badges

3 Comments

Ali Adravi Over a year ago

Do you want to change the object where name is 'age'? or even you don't know the property name?

Olaf Erlandsen Over a year ago

i don't know property name :)

Ali Adravi Over a year ago

See I added a fiddle link and change code if you want to change the age on the basis of name value

Sachin · Accepted Answer · 2016-08-10 16:19:54Z

0

May be this will help you

HTML

   <div ng-repeat="element in elements">
        <a href="" ng-click="Update($index)">Update AGE</a>
        <h1>You age is {{element.age}}</h1>
    </div>

js part

$scope.Update=function(i){
$scope.elements[i].age="new age";
}

You can check your conditions inside the Update function

Update

Is this you are expecting , check here http://codepen.io/keephacking/pen/yJGVNx?editors=1010

edited Aug 10, 2016 at 16:19

answered Aug 10, 2016 at 15:41

Sachin

2,7831 gold badge21 silver badges36 bronze badges

3 Comments

Olaf Erlandsen Over a year ago

But i wat use like ng-click=" dynamicVar = 5345345 ". If i use you method, i will need create function for sum, update, etc..

Sachin Over a year ago

Sorry , I did't get that . Can you elaborate your question with an example or something.

Olaf Erlandsen Over a year ago

sorry, my english is poor. But I can update my question, thanks!

Collectives™ on Stack Overflow

how to use dynamic variables on ng-click angular?

4 Answers 4

Comments

Comments

3 Comments

HTML

js part

Update

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

HTML

js part

Update

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related