Menyetel variabel cakupan dinamis di AngularJs - cakupan. <some_string>

Saya memiliki string yang saya dapatkan dari routeParamatau atribut direktif atau apa pun, dan saya ingin membuat variabel pada ruang lingkup berdasarkan ini. Begitu:

$scope.<the_string> = "something".

Namun, jika string berisi satu atau beberapa titik, saya ingin membaginya dan benar-benar "menelusuri" ke dalam cakupan. Jadi 'foo.bar'seharusnya menjadi $scope.foo.bar. Artinya, versi sederhana tidak akan berfungsi!

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

Saat membaca variabel berdasarkan string, Anda bisa mendapatkan perilaku ini dengan melakukan $scope.$eval(the_string), tetapi bagaimana melakukannya saat menetapkan nilai?

Solusi yang saya temukan adalah dengan menggunakan $ parse .

"Mengubah ekspresi Angular menjadi sebuah fungsi."

Jika ada yang punya jawaban yang lebih baik tolong tambahkan jawaban baru untuk pertanyaan itu!

Berikut contohnya:

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

Menggunakan jawaban Erik, sebagai titik awal. Saya menemukan solusi yang lebih sederhana yang berhasil untuk saya.

Dalam fungsi ng-click saya, saya memiliki:

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

Saya telah mengujinya dengan dan tanpa $ scope. $ Apply. Bekerja dengan benar tanpanya!

Buat variabel sudut dinamis dari hasil

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

ps. jangan lupa untuk memasukkan atribut $ parse ke dalam fungsi pengontrol Anda

Jika Anda tidak masalah menggunakan Lodash, Anda dapat melakukan hal yang Anda inginkan dalam satu baris menggunakan _.set ():

_.set (object, path, value) Mengatur nilai properti jalur pada objek. Jika sebagian jalur tidak ada, itu dibuat.

https://lodash.com/docs#set

Jadi contoh Anda adalah: _.set($scope, the_string, something);

Hanya untuk menambahkan jawaban yang telah diberikan, berikut ini berhasil untuk saya:

HTML:

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

Dimana $indexindeks loop.

Javascript (di mana valueparameter yang diteruskan ke fungsi dan itu akan menjadi nilai $index, indeks loop saat ini):

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

Harap diingat: ini hanyalah JavaScript dan tidak ada hubungannya dengan Angular JS. Jadi jangan bingung tentang tanda '$' ajaib;)

Masalah utamanya adalah ini adalah struktur hierarki.

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

Ini tidak ditentukan karena "$ scope.life" tidak ada tetapi istilah di atas ingin memecahkan "arti".

Solusi seharusnya

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

atau dengan sedikit usaha lagi.

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

Karena Anda dapat mengakses objek struktural dengan

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

Ada beberapa tutorial bagus tentang ini yang memandu Anda dengan baik melalui kesenangan dengan JavaScript.

Ada sesuatu tentang

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

Pergi dan cari web untuk 'angular $ apply' dan Anda akan menemukan informasi tentang fungsi $ apply. Dan Anda harus menggunakan lebih bijak dengan cara ini (jika Anda tidak alreay dengan fase $ apply).

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

Jika Anda menggunakan pustaka Lodash di bawah ini adalah cara untuk menyetel variabel dinamis dalam lingkup sudut.

Untuk mengatur nilai dalam lingkup sudut.

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

Untuk mendapatkan nilai dari lingkup sudut.

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

Jika Anda mencoba melakukan apa yang saya bayangkan Anda coba lakukan, maka Anda hanya perlu memperlakukan scope seperti objek JS biasa.

Inilah yang saya gunakan untuk respons sukses API untuk larik data 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;
    });
}

Sekarang {{subject}} akan mengembalikan larik nama subjek data, dan dalam contoh saya akan ada atribut cakupan untuk {{jobs}}, {{customers}}, {{staff}}, dll. Dari $ scope. pekerjaan, $ scope.customers, $ scope.staff