Configurando variables ​​de escopo dynamic em AngularJs – escopo.

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

 $scope. = "something". 

No entanto, se a cadeia contiver um ou mais pontos, quero dividi-la e, na verdade, “detalhar” no escopo. Então, 'foo.bar' deve se tornar $scope.foo.bar . Isso significa que a versão simples não funciona!

 // 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 com base 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 function.”

Se alguém tiver um melhor, por favor 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. Eu encontrei uma solução mais simples que funcionou para mim.

Na minha function ng-click eu 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 isso!

Criar variables ​​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 function do seu controlador

Se você está bem com o uso do Lodash, você pode fazer o que quiser em uma linha usando _.set ():

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

https://lodash.com/docs#set

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

Apenas para adicionar respostas pré-determinadas, o seguinte funcionou para mim:

HTML:

 

Onde $index é o índice de loop.

Javascript (em que value é o parâmetro passado para a function e será o valor de $index , current loop index):

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

Por favor, tenha em mente: isso é apenas uma coisa de JavaScript e não tem nada a ver com o Angular JS. Então não fique confuso sobre o sinal mágico ‘$’;)

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

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

Isso é indefinido porque “$ scope.life” não existe, mas o termo acima quer resolver “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 ']); 

Desde que você pode acessar um object estrutural com

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

Existem vários bons tutoriais sobre isso que o guiam bem através da 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 function $ apply. E você deve usar sabiamente mais desta forma (se você não estiver com uma fase $ apply).

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

Se você estava tentando fazer o que eu imagino que você estava tentando fazer, então você só tem que tratar o escopo como um object 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, {{subjects}} retornará uma matriz de nomes de assunto de dados e, no meu exemplo, haverá um atributo de escopo para {{jobs}}, {{customers}}, {{staff}}, etc., de $ scope. jobs, $ scope.customers, $ scope.staff

    Intereting Posts