Встановлення динамічних змінних області в AngularJs - scope. <some_string>

У мене є рядок, який я отримав з routeParamатрибута a direktiva або будь-якого іншого, і я хочу створити змінну на області застосування на основі цього. Так:

$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. І ви повинні використовувати розумно більше таким чином (якщо ви вже не з фазою $ apply).

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

Якщо ви використовуєте бібліотеку Lodash нижче, це спосіб встановити динамічну змінну в кутовій області.

Щоб встановити значення в кутовій області.

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

Тепер {{subjects}} поверне масив назв суб'єктів даних, і в моєму прикладі буде атрибут області для {{jobs}}, {{customers}}, {{staff}} тощо з $ range. вакансії, $ scope.customers, $ scope.staff