Définition de variables de portée dynamique dans AngularJs - scope. <some_string>

J'ai une chaîne que j'ai obtenue à partir d'un routeParamattribut de directive ou d'un autre, et je veux créer une variable sur la portée en fonction de cela. Alors:

$scope.<the_string> = "something".

Cependant, si la chaîne contient un ou plusieurs points, je veux la diviser et en fait "explorer" la portée. Alors 'foo.bar'devrait devenir $scope.foo.bar. Cela signifie que la version simple ne fonctionnera pas!

// This will not work as assigning variables like this will not "drill down"
// It will assign to a variables named the exact string, dots and all.
var the_string = 'life.meaning';
$scope[the_string] = 42;
console.log($scope.life.meaning);  // <-- Nope! This is undefined.
console.log($scope['life.meaning']);  // <-- It is in here instead!

Lors de la lecture d'une variable basée sur une chaîne, vous pouvez obtenir ce comportement en faisant $scope.$eval(the_string), mais comment le faire lors de l'attribution d'une valeur?

La solution que j'ai trouvée est d'utiliser $ parse .

"Convertit l'expression angulaire en fonction."

Si quelqu'un en a une meilleure, veuillez ajouter une nouvelle réponse à la question!

Voici l'exemple:

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

En utilisant la réponse d'Erik, comme point de départ. J'ai trouvé une solution plus simple qui a fonctionné pour moi.

Dans ma fonction ng-click, j'ai:

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

Je l'ai testé avec et sans $ scope. $ Apply. Fonctionne correctement sans cela!

Créer des variables angulaires dynamiques à partir des résultats

angular.forEach(results, function (value, key) {          
  if (key != null) {                       
    $parse(key).assign($scope, value);                                
  }          
});

ps. n'oubliez pas de passer l'attribut $ parse dans la fonction de votre contrôleur

Si vous êtes d'accord avec Lodash, vous pouvez faire ce que vous vouliez en une seule ligne en utilisant _.set ():

_.set (objet, chemin, valeur) Définit la valeur de propriété du chemin sur l'objet. Si une partie du chemin n'existe pas, elle est créée.

https://lodash.com/docs#set

Donc, votre exemple serait simplement: _.set($scope, the_string, something);

Juste pour ajouter aux réponses déjà données, ce qui suit a fonctionné pour moi:

HTML:

<div id="div{{$index+1}}" data-ng-show="val{{$index}}">

Où $index est l'index de la boucle.

Javascript (où valueest le paramètre passé à la fonction et ce sera la valeur de $index, index de la boucle actuelle):

var variable = "val"+value;
if ($scope[variable] === undefined)
{
    $scope[variable] = true;
}else {
    $scope[variable] = !$scope[variable];
}

Veuillez garder à l'esprit: il ne s'agit que de JavaScript et n'a rien à voir avec Angular JS. Alors ne soyez pas confus avec le signe magique '$';)

Le problème principal est qu'il s'agit d'une structure hiérarchique.

console.log($scope.life.meaning);  // <-- Nope! This is undefined.
=> a.b.c

Ceci n'est pas défini car "$ scope.life" n'existe pas mais le terme ci-dessus veut résoudre le "sens".

Une solution devrait être

var the_string = 'lifeMeaning';
$scope[the_string] = 42;
console.log($scope.lifeMeaning);
console.log($scope['lifeMeaning']);

ou avec un peu plus d'effort.

var the_string_level_one = 'life';
var the_string_level_two = the_string_level_one + '.meaning';
$scope[the_string_level_two ] = 42;
console.log($scope.life.meaning);
console.log($scope['the_string_level_two ']);

Puisque vous pouvez accéder à un objet structurel avec

var a = {};
a.b = "ab";
console.log(a.b === a['b']);

Il existe plusieurs bons tutoriels à ce sujet qui vous guident bien à travers le plaisir avec JavaScript.

Il y a quelque chose dans le

$scope.$apply();
do...somthing...bla...bla

Allez chercher sur le Web «angular $ apply» et vous trouverez des informations sur la fonction $ apply. Et vous devriez l'utiliser plus judicieusement de cette façon (si vous n'êtes pas déjà d'accord avec une phase $ apply).

$scope.$apply(function (){
    do...somthing...bla...bla
})

Si vous utilisez la bibliothèque Lodash, voici le moyen de définir une variable dynamique dans la portée angulaire.

Pour définir la valeur dans la portée angulaire.

_.set($scope, the_string, 'life.meaning')

Pour obtenir la valeur de la portée angulaire.

_.get($scope, 'life.meaning')

Si vous essayiez de faire ce que j'imagine que vous essayiez de faire, alors vous n'avez qu'à traiter scope comme un objet JS normal.

C'est ce que j'utilise pour une réponse de réussite d'API pour un tableau de données JSON ...

function(data){

    $scope.subjects = [];

    $.each(data, function(i,subject){
        //Store array of data types
        $scope.subjects.push(subject.name);

        //Split data in to arrays
        $scope[subject.name] = subject.data;
    });
}

Désormais, {{sujets}} renverra un tableau de noms de sujets de données, et dans mon exemple, il y aurait un attribut scope pour {{jobs}}, {{customers}}, {{staff}}, etc. de $ scope. emplois, $ scope.customers, $ scope.staff