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!

Answer 1

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

Answer 2

$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>

Answer 3

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

Answer 4

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>