Ustawianie zmiennych zakresu dynamicznego w AngularJs - scope. <some_string>

Mam ciąg, który otrzymałem z routeParamatrybutu lub dyrektywy lub czegokolwiek, i chcę na tej podstawie utworzyć zmienną o zakresie. Więc:

$scope.<the_string> = "something".

Jeśli jednak ciąg zawiera jedną lub więcej kropek, chcę go podzielić i faktycznie „drążyć” w zakresie. Tak 'foo.bar'powinno się stać $scope.foo.bar. Oznacza to, że prosta wersja nie będzie działać!

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

Czytając zmienną opartą na łańcuchu, możesz uzyskać to zachowanie, robiąc $scope.$eval(the_string), ale jak to zrobić, przypisując wartość?

Rozwiązaniem, które znalazłem, jest użycie $ parse .

„Konwertuje wyrażenie kątowe na funkcję”.

Jeśli ktoś ma lepszy, dodaj nową odpowiedź na pytanie!

Oto przykład:

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

Używając odpowiedzi Erika jako punktu wyjścia. Znalazłem prostsze rozwiązanie, które działało dla mnie.

W mojej funkcji ng-click mam:

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

Przetestowałem to z $ scope i bez niego. $ Apply. Działa poprawnie bez tego!

Utwórz dynamiczne zmienne kątowe na podstawie wyników

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

ps. nie zapomnij przekazać atrybutu $ parse do funkcji twojego kontrolera

Jeśli nie przeszkadza ci używanie Lodash, możesz zrobić to, co chciałeś w jednej linii za pomocą _.set ():

_.set (obiekt, ścieżka, wartość) Ustawia wartość właściwości ścieżki na obiekcie. Jeśli część ścieżki nie istnieje, zostaje utworzona.

https://lodash.com/docs#set

Więc twój przykład byłby po prostu: _.set($scope, the_string, something);

Aby dodać do już podanych odpowiedzi, zadziałały dla mnie następujące:

HTML:

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

Gdzie $indexjest indeks pętli.

Javascript (gdzie valuejest przekazanym parametrem do funkcji i będzie to wartość $index, indeks pętli prądowej):

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

Pamiętaj: to tylko rzecz JavaScript i nie ma nic wspólnego z Angular JS. Więc nie daj się zmylić magicznym znakiem '$';)

Główny problem polega na tym, że jest to struktura hierarchiczna.

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

Nie jest to zdefiniowane, ponieważ „$ scope.life” nie istnieje, ale powyższy termin chce rozwiązać „znaczenie”.

Powinno być rozwiązaniem

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

lub z nieco większym wysiłkiem.

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

Ponieważ możesz uzyskać dostęp do obiektu strukturalnego za pomocą

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

Istnieje kilka dobrych tutoriali na ten temat, które dobrze poprowadzą Cię przez zabawę z JavaScriptem.

Jest coś w tym

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

Idź i wyszukaj w Internecie „angular $ apply”, a znajdziesz informacje o funkcji $ apply. I powinieneś używać mądrzejszego sposobu w ten sposób (jeśli nie jesteś już z fazą stosowania).

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

Jeśli korzystasz z biblioteki Lodash, poniżej jest sposób na ustawienie zmiennej dynamicznej w zakresie kątowym.

Aby ustawić wartość w zakresie kątowym.

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

Aby uzyskać wartość z zakresu kątowego.

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

Jeśli próbujesz zrobić to, co sobie wyobrażam, próbujesz zrobić, wtedy musisz traktować zasięg jak zwykły obiekt JS.

To jest to, czego używam do odpowiedzi API sukcesu dla tablicy danych 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;
    });
}

Teraz {{subject}} zwróci tablicę nazwisk osób, których dane dotyczą, aw moim przykładzie będzie atrybut zakresu dla {{jobs}}, {{customers}}, {{staff}} itd. Z $ scope. Jobs, $ scope.customers, $ scope.staff