Установка переменных динамической области видимости в AngularJs - scope. <some_string>

У меня есть строка, полученная из routeParamатрибута директивы или чего-то еще, и я хочу создать переменную в области видимости на основе этого. Так:

$scope.<the_string> = "something".

Однако, если строка содержит одну или несколько точек, я хочу разбить ее и фактически «углубиться» в область видимости. Так 'foo.bar'должно стать $scope.foo.bar. Это означает, что простая версия работать не будет!

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

При чтении переменной, основанной на строке, вы можете добиться такого поведения, выполняя действия $scope.$eval(the_string), но как это сделать при присвоении значения?

Решение, которое я нашел, - использовать $ parse .

«Преобразует угловое выражение в функцию».

Если у кого-то есть получше, дайте новый ответ на вопрос!

Вот пример:

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

Используя ответ Эрика в качестве отправной точки. Я нашел более простое решение, которое сработало для меня.

В моей функции ng-click у меня есть:

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

Я тестировал его с $ scope. $ Apply и без него. Без него работает корректно!

Создать динамические угловые переменные из результатов

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

пс. не забудьте передать атрибут $ parse в функцию вашего контроллера

Если вас устраивает использование Lodash, вы можете сделать то, что хотели, в одной строке, используя _.set ():

_.set (объект, путь, значение) Устанавливает значение свойства пути для объекта. Если часть пути не существует, она создается.

https://lodash.com/docs#set

Итак, ваш пример будет просто: _.set($scope, the_string, something);

Просто чтобы добавить в уже полученные ответы, у меня сработало следующее:

HTML:

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

Где $indexиндекс цикла.

Javascript (где value- параметр, переданный функции, и это будет значение $index, текущий индекс цикла):

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

Имейте в виду: это всего лишь часть JavaScript и не имеет ничего общего с Angular JS. Так что пусть вас не смущает волшебный знак "$";)

Основная проблема в том, что это иерархическая структура.

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

Это не определено, потому что "$ scope.life" не существует, но термин выше хочет решить "смысл".

Решение должно быть

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

или немного больше усилий.

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

Поскольку вы можете получить доступ к структурному объекту с помощью

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

Есть несколько хороших руководств по этому поводу, которые помогут вам развлечься с JavaScript.

Что-то есть в

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

Найдите в Интернете "angular $ apply", и вы найдете информацию о функции $ apply. И вам следует более разумно использовать этот способ (если у вас еще нет фазы применения $).

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

Если вы используете библиотеку Lodash, ниже представлен способ установки динамической переменной в области angular.

Чтобы установить значение в угловой области.

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

Чтобы получить значение из угловой области.

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

Если вы пытались сделать то, что, как я полагаю, вы пытались сделать, тогда вам нужно только рассматривать область видимости как обычный объект JS.

Это то, что я использую для успешного ответа API для массива данных 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;
    });
}

Теперь {{subject}} вернет массив имен субъектов данных, и в моем примере будет атрибут scope для {{jobs}}, {{customers}}, {{staff}} и ​​т. Д. Из $ scope. вакансии, $ scope.customers, $ scope.staff