Setting dynamic scope variables in AngularJs - scope.<some_string>
Solution 1:
The solution I have found is to use $parse.
"Converts Angular expression into a function."
If anyone has a better one please add a new answer to the question!
Here is the example:
var the_string = 'life.meaning';
// Get the model
var model = $parse(the_string);
// Assigns a value to it
model.assign($scope, 42);
// Apply it to the scope
// $scope.$apply(); <- According to comments, this is no longer needed
console.log($scope.life.meaning); // logs 42
Solution 2:
Using Erik's answer, as a starting point. I found a simpler solution that worked for me.
In my ng-click function I have:
var the_string = 'lifeMeaning';
if ($scope[the_string] === undefined) {
//Valid in my application for first usage
$scope[the_string] = true;
} else {
$scope[the_string] = !$scope[the_string];
}
//$scope.$apply
I've tested it with and without $scope.$apply. Works correctly without it!
Solution 3:
Create Dynamic angular variables from results
angular.forEach(results, function (value, key) {
if (key != null) {
$parse(key).assign($scope, value);
}
});
ps. don't forget to pass in the $parse attribute into your controller's function
Solution 4:
If you are ok with using Lodash, you can do the thing you wanted in one line using _.set():
_.set(object, path, value) Sets the property value of path on object. If a portion of path does not exist it’s created.
https://lodash.com/docs#set
So your example would simply be: _.set($scope, the_string, something);
Solution 5:
Just to add into alread given answers, the following worked for me:
HTML:
<div id="div{{$index+1}}" data-ng-show="val{{$index}}">
Where $index
is the loop index.
Javascript (where value
is the passed parameter to the function and it will be the value of $index
, current loop index):
var variable = "val"+value;
if ($scope[variable] === undefined)
{
$scope[variable] = true;
}else {
$scope[variable] = !$scope[variable];
}