Festlegen dynamischer Bereichsvariablen in AngularJs - scope. <Some_string>

Ich habe eine Zeichenfolge, die ich von einem routeParamoder einem Direktivenattribut oder was auch immer erhalten habe, und ich möchte basierend darauf eine Variable für den Bereich erstellen. So:

$scope.<the_string> = "something".

Wenn die Zeichenfolge jedoch einen oder mehrere Punkte enthält, möchte ich sie aufteilen und tatsächlich einen Drilldown in den Bereich durchführen. So 'foo.bar'sollte werden $scope.foo.bar. Dies bedeutet, dass die einfache Version nicht funktioniert!

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

Wenn Sie eine Variable lesen, die auf einer Zeichenfolge basiert, können Sie dieses Verhalten erhalten $scope.$eval(the_string), aber wie geht es beim Zuweisen eines Werts?

Die Lösung, die ich gefunden habe, ist die Verwendung von $ parse .

"Wandelt den Winkelausdruck in eine Funktion um."

Wenn jemand eine bessere hat, fügen Sie bitte eine neue Antwort auf die Frage hinzu!

Hier ist das Beispiel:

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

Verwenden Sie Eriks Antwort als Ausgangspunkt. Ich habe eine einfachere Lösung gefunden, die für mich funktioniert hat.

In meiner ng-click-Funktion habe ich:

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

Ich habe es mit und ohne $ scope getestet. $ Apply. Funktioniert richtig ohne!

Erstellen Sie aus den Ergebnissen dynamische Winkelvariablen

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

ps. Vergessen Sie nicht, das Attribut $ parse an die Funktion Ihres Controllers zu übergeben

Wenn Sie mit Lodash einverstanden sind, können Sie mit _.set () das, was Sie wollten, in einer Zeile ausführen:

_.set (Objekt, Pfad, Wert) Legt den Eigenschaftswert des Pfads für das Objekt fest. Wenn ein Teil des Pfads nicht vorhanden ist, wird er erstellt.

https://lodash.com/docs#set

Ihr Beispiel wäre also einfach: _.set($scope, the_string, something);

Nur um bereits gegebene Antworten hinzuzufügen, hat Folgendes für mich funktioniert:

HTML:

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

Wo $indexist der Schleifenindex?

Javascript (wobei valueder Parameter an die Funktion übergeben wird und der Wert des $indexaktuellen Schleifenindex ist):

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

Bitte beachten Sie: Dies ist nur eine JavaScript-Sache und hat nichts mit Angular JS zu tun. Also sei nicht verwirrt über das magische '$' Zeichen;)

Das Hauptproblem ist, dass dies eine hierarchische Struktur ist.

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

Dies ist undefiniert, da "$ scope.life" nicht vorhanden ist, der obige Begriff jedoch "Bedeutung" lösen möchte.

Eine Lösung sollte sein

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

oder mit etwas mehr Efford.

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

Da kann man mit auf ein Strukturobjekt zugreifen

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

Es gibt mehrere gute Tutorials dazu, die Sie gut durch den Spaß mit JavaScript führen.

Da ist etwas an der

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

Durchsuchen Sie das Web nach "Angular $ Apply" und Sie finden Informationen zur $ Apply-Funktion. Und Sie sollten es weise mehr auf diese Weise verwenden (wenn Sie nicht bereits mit einer $ apply-Phase vertraut sind).

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

Wenn Sie die unten stehende Lodash-Bibliothek verwenden, können Sie eine dynamische Variable im Winkelbereich festlegen.

Festlegen des Werts im Winkelbereich.

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

Um den Wert aus dem Winkelbereich zu erhalten.

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

Wenn Sie versucht haben, das zu tun, was ich mir vorgestellt habe, müssen Sie den Bereich nur wie ein normales JS-Objekt behandeln.

Dies ist, was ich für eine API-Erfolgsantwort für JSON-Datenarray verwende ...

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;
    });
}

Jetzt gibt {{subject}} ein Array von Namen der betroffenen Person zurück, und in meinem Beispiel gibt es ein Bereichsattribut für {{jobs}}, {{customers}}, {{staff}} usw. von $ scope. Jobs, $ scope.customers, $ scope.staff