Impostazione delle variabili di ambito dinamico in AngularJs - scope. <some_string>

Ho una stringa che ho ottenuto da un routeParamo un attributo di direttiva o qualsiasi altra cosa, e voglio creare una variabile sull'ambito basata su questo. Così:

$scope.<the_string> = "something".

Tuttavia, se la stringa contiene uno o più punti, voglio dividerla e "approfondire" effettivamente l'ambito. Così 'foo.bar'dovrebbe diventare $scope.foo.bar. Ciò significa che la versione semplice non funzionerà!

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

Quando leggi una variabile basata su una stringa puoi ottenere questo comportamento facendo $scope.$eval(the_string), ma come farlo quando assegni un valore?

La soluzione che ho trovato è usare $ parse .

"Converte l'espressione angolare in una funzione."

Se qualcuno ne ha uno migliore, aggiungi una nuova risposta alla domanda!

Ecco l'esempio:

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 risposta di Erik, come punto di partenza. Ho trovato una soluzione più semplice che ha funzionato per me.

Nella mia funzione ng-click ho:

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

L'ho testato con e senza $ scope. $ Apply. Funziona correttamente senza di essa!

Crea variabili angolari dinamiche dai risultati

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

ps. non dimenticare di passare l'attributo $ parse nella funzione del tuo controller

Se sei d'accordo con l'uso di Lodash, puoi fare la cosa che volevi in ​​una riga usando _.set ():

_.set (oggetto, percorso, valore) Imposta il valore della proprietà del percorso sull'oggetto. Se una porzione di percorso non esiste viene creata.

https://lodash.com/docs#set

Quindi il tuo esempio sarebbe semplicemente: _.set($scope, the_string, something);

Solo per aggiungere alle risposte già fornite, il seguente ha funzionato per me:

HTML:

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

Dov'è $indexl'indice del ciclo.

Javascript (dove valueè il parametro passato alla funzione e sarà il valore di $index, indice del ciclo corrente):

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

Tieni presente che questa è solo una cosa JavaScript e non ha nulla a che fare con Angular JS. Quindi non essere confuso riguardo al magico segno '$';)

Il problema principale è che questa è una struttura gerarchica.

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

Questo non è definito perché "$ scope.life" non esiste ma il termine sopra vuole risolvere "significato".

Una soluzione dovrebbe essere

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

o con un po 'più di impegno.

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

Dal momento che puoi accedere a un oggetto strutturale con

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

Ci sono molti buoni tutorial su questo argomento che ti guidano nel divertimento con JavaScript.

C'è qualcosa in

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

Vai e cerca nel web "angular $ apply" e troverai informazioni sulla funzione $ apply. E dovresti usarlo saggiamente in questo modo (se non sei già pronto con una fase $ apply).

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

Se stai usando la libreria Lodash qui sotto è il modo per impostare una variabile dinamica nell'ambito angolare.

Per impostare il valore nell'ambito angolare.

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

Per ottenere il valore dall'ambito angolare.

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

Se stavi cercando di fare quello che immagino stavi cercando di fare, allora devi solo trattare l'ambito come un normale oggetto JS.

Questo è ciò che utilizzo per una risposta di successo dell'API per l'array di dati 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;
    });
}

Ora {{subject}} restituirà un array di nomi di soggetti dei dati e nel mio esempio ci sarebbe un attributo scope per {{jobs}}, {{customers}}, {{staff}}, ecc. Da $ scope. jobs, $ scope.customers, $ scope.staff