Đặt các biến phạm vi động trong AngularJs - scope. <some_string>

Tôi có một chuỗi mà tôi đã nhận được từ một routeParamhoặc một thuộc tính chỉ thị hoặc bất cứ thứ gì và tôi muốn tạo một biến trên phạm vi dựa trên điều này. Vì thế:

$scope.<the_string> = "something".

Tuy nhiên, nếu chuỗi chứa một hoặc nhiều dấu chấm, tôi muốn tách nó ra và thực sự "đi sâu" vào phạm vi. Vì vậy, 'foo.bar'nên trở thành $scope.foo.bar. Điều này có nghĩa là phiên bản đơn giản sẽ không hoạt động!

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

Khi đọc một biến dựa trên một chuỗi, bạn có thể nhận được hành vi này bằng cách thực hiện $scope.$eval(the_string), nhưng làm thế nào để thực hiện điều đó khi gán một giá trị?

Giải pháp tôi đã tìm thấy là sử dụng $ parse .

"Chuyển đổi biểu thức Angular thành một hàm."

Nếu ai có câu trả lời hay hơn, vui lòng thêm câu trả lời mới cho câu hỏi!

Đây là ví dụ:

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

Sử dụng câu trả lời của Erik, làm điểm khởi đầu. Tôi đã tìm thấy một giải pháp đơn giản hơn phù hợp với tôi.

Trong chức năng ng-click của mình, tôi có:

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

Tôi đã thử nghiệm nó có và không có $ scope. $ Áp dụng. Hoạt động chính xác mà không có nó!

Tạo biến góc động từ kết quả

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

ps. đừng quên chuyển thuộc tính $ parse vào chức năng của bộ điều khiển của bạn

Nếu bạn đồng ý với việc sử dụng Lodash, bạn có thể thực hiện những điều bạn muốn trong một dòng bằng cách sử dụng _.set ():

_.set (đối tượng, đường dẫn, giá trị) Đặt giá trị thuộc tính của đường dẫn trên đối tượng. Nếu một phần của đường dẫn không tồn tại, nó sẽ được tạo.

https://lodash.com/docs#set

Vì vậy, ví dụ của bạn sẽ đơn giản là: _.set($scope, the_string, something);

Chỉ để thêm vào các câu trả lời đã cho đã đọc, những điều sau đây phù hợp với tôi:

HTML:

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

Trong trường hợp $indexlà chỉ số vòng lặp.

Javascript ( valuetham số được truyền vào hàm ở đâu và nó sẽ là giá trị của $index, chỉ mục vòng lặp hiện tại):

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

Xin lưu ý: đây chỉ là một thứ JavaScript và không liên quan gì đến Angular JS. Vì vậy, đừng nhầm lẫn về dấu hiệu '$' kỳ diệu;)

Vấn đề chính là đây là một cấu trúc phân cấp.

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

Điều này không được xác định vì "$ scope.life" không tồn tại nhưng thuật ngữ ở trên muốn giải quyết "nghĩa".

Một giải pháp nên

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

hoặc với một chút hiệu quả hơn.

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

Vì bạn có thể truy cập một đối tượng cấu trúc với

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

Có một số hướng dẫn tốt về điều này sẽ hướng dẫn bạn tận hưởng niềm vui với JavaScript.

Có điều gì đó về

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

Truy cập và tìm kiếm trên web cho 'angle $ apply' và bạn sẽ tìm thấy thông tin về chức năng $ apply. Và bạn nên sử dụng cách này một cách khôn ngoan hơn (nếu bạn không phù hợp với giai đoạn $ apply).

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

Nếu bạn đang sử dụng thư viện Lodash dưới đây là cách để đặt một biến động trong phạm vi góc.

Để đặt giá trị trong phạm vi góc.

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

Để lấy giá trị từ phạm vi góc.

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

Nếu bạn đang cố gắng làm những gì tôi tưởng tượng là bạn đang cố gắng làm, thì bạn chỉ phải coi phạm vi như một đối tượng JS thông thường.

Đây là những gì tôi sử dụng cho phản hồi thành công API cho mảng dữ liệu 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;
    });
}

Bây giờ, {{Subject}} sẽ trả về một mảng tên chủ thể dữ liệu và trong ví dụ của tôi, sẽ có một thuộc tính phạm vi cho {{công việc}}, {{khách hàng}}, {{nhân viên}}, v.v. từ $ scope. việc làm, $ scope.customers, $ scope.staff