Configuración de variables de alcance dinámico en AngularJs - scope. <some_string>

Tengo una cadena que obtuve de un routeParamatributo de directiva o lo que sea, y quiero crear una variable en el alcance basada en esto. Entonces:

$scope.<the_string> = "something".

Sin embargo, si la cadena contiene uno o más puntos, quiero dividirla y "profundizar" en el alcance. Así 'foo.bar'debería ser $scope.foo.bar. ¡Esto significa que la versión simple no funcionará!

// 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!

Al leer una variable basada en una cadena, puede obtener este comportamiento al hacerlo $scope.$eval(the_string), pero ¿cómo hacerlo al asignar un valor?

La solución que he encontrado es usar $ parse .

"Convierte la expresión angular en una función".

Si alguien tiene una mejor, agregue una nueva respuesta a la pregunta.

Aquí está el ejemplo:

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

Usando la respuesta de Erik, como punto de partida. Encontré una solución más simple que funcionó para mí.

En mi función ng-click tengo:

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

Lo he probado con y sin $ scope. $ Apply. ¡Funciona correctamente sin él!

Cree variables angulares dinámicas a partir de los resultados

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

PD. no olvide pasar el atributo $ parse a la función de su controlador

Si está de acuerdo con el uso de Lodash, puede hacer lo que quería en una línea usando _.set ():

_.set (objeto, ruta, valor) Establece el valor de propiedad de la ruta en el objeto. Si una parte de la ruta no existe, se crea.

https://lodash.com/docs#set

Entonces tu ejemplo sería simplemente: _.set($scope, the_string, something);

Solo para agregar a las respuestas ya dadas, lo siguiente funcionó para mí:

HTML:

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

¿Dónde $indexestá el índice de bucle?

Javascript (donde valueestá el parámetro pasado a la función y será el valor de $index, índice de ciclo actual):

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

Tenga en cuenta: esto es solo una cosa de JavaScript y no tiene nada que ver con Angular JS. Así que no se confunda con el signo mágico '$';)

El principal problema es que se trata de una estructura jerárquica.

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

Esto no está definido porque "$ scope.life" no existe pero el término anterior quiere resolver el "significado".

Una solución debería ser

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

o con un poco más de esfuerzo.

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 ']);

Dado que puede acceder a un objeto estructural con

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

Hay varios buenos tutoriales sobre esto que lo guiarán bien a través de la diversión con JavaScript.

Hay algo en el

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

Vaya y busque en la web 'angular $ apply' y encontrará información sobre la función $ apply. Y debe usarlo sabiamente de esta manera (si aún no está con una fase de $ aplicar).

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

Si está utilizando la biblioteca Lodash, a continuación se muestra la forma de establecer una variable dinámica en el alcance angular.

Para establecer el valor en el alcance angular.

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

Para obtener el valor del alcance angular.

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

Si estaba tratando de hacer lo que imagino que estaba tratando de hacer, entonces solo tiene que tratar el alcance como un objeto JS normal.

Esto es lo que uso para una respuesta de éxito de la API para la matriz de datos 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;
    });
}

Ahora {{subject}} devolverá una matriz de nombres de sujetos de datos, y en mi ejemplo habría un atributo de alcance para {{trabajos}}, {{clientes}}, {{personal}}, etc. de $ alcance. trabajos, $ scope.customers, $ scope.staff