Definindo variáveis ​​de escopo dinâmicas em AngularJs - escopo. <some_string>

Eu tenho uma string que obtive de um routeParamou de um atributo de diretiva ou de qualquer outra coisa, e quero criar uma variável no escopo com base nisso. Assim:

$scope.<the_string> = "something".

No entanto, se a string contém um ou mais pontos, quero dividi-la e realmente "detalhar" o escopo. Então 'foo.bar'deve se tornar $scope.foo.bar. Isso significa que a versão simples não 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!

Ao ler uma variável baseada em uma string, você pode obter esse comportamento fazendo $scope.$eval(the_string), mas como fazê-lo ao atribuir um valor?

A solução que encontrei é usar $ parse .

"Converte a expressão angular em uma função."

Se alguém tiver uma melhor, adicione uma nova resposta à pergunta!

Aqui está o exemplo:

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 a resposta de Erik, como ponto de partida. Encontrei uma solução mais simples que funcionou para mim.

Na minha função ng-click, tenho:

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

Eu testei com e sem $ scope. $ Apply. Funciona corretamente sem ele!

Crie variáveis ​​angulares dinâmicas a partir dos resultados

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

ps. não se esqueça de passar o atributo $ parse para a função de seu controlador

Se estiver tudo bem com o Lodash, você pode fazer o que deseja em uma linha usando _.set ():

_.set (objeto, caminho, valor) Define o valor da propriedade do caminho no objeto. Se uma parte do caminho não existir, ela será criada.

https://lodash.com/docs#set

Portanto, seu exemplo seria simplesmente: _.set($scope, the_string, something);

Apenas para adicionar às respostas já dadas, o seguinte funcionou para mim:

HTML:

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

Onde $indexestá o índice do loop.

Javascript (onde valueé o parâmetro passado para a função e será o valor de $index, índice de loop atual):

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

Lembre-se: isso é apenas uma coisa do JavaScript e não tem nada a ver com Angular JS. Portanto, não se confunda sobre o sinal mágico '$';)

O principal problema é que esta é uma estrutura hierárquica.

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

Isso é indefinido porque "$ scope.life" não existe, mas o termo acima deseja resolver o "significado".

Uma solução deve ser

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

ou com um pouco mais de esforço.

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

Uma vez que você pode acessar um objeto estrutural com

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

Existem vários bons tutoriais sobre isso que o orientam bem na diversão com JavaScript.

Há algo sobre o

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

Vá e pesquise na web por 'angular $ apply' e você encontrará informações sobre a função $ apply. E você deve usar é mais sabiamente desta forma (se você ainda não estiver com uma fase $ apply).

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

Se você estiver usando a biblioteca Lodash, abaixo é a maneira de definir uma variável dinâmica no escopo angular.

Para definir o valor no escopo angular.

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

Para obter o valor do escopo angular.

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

Se você estava tentando fazer o que eu imagino que estava tentando fazer, então você só precisa tratar o escopo como um objeto JS regular.

Isso é o que eu uso para uma resposta de sucesso da API para a matriz de dados 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;
    });
}

Agora {{sujeitos}} retornará uma matriz de nomes de assunto de dados, e em meu exemplo haveria um atributo de escopo para {{empregos}}, {{clientes}}, {{equipe}}, etc. de $ escopo. empregos, $ scope.customers, $ scope.staff