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 를 사용하는 것 입니다.

"Angular 표현식을 함수로 변환합니다."

더 나은 사람이 있다면 질문에 새로운 답변을 추가하십시오!

다음은 그 예입니다.

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

Erik의 대답을 시작점으로 사용합니다. 저에게 효과가있는 더 간단한 솔루션을 찾았습니다.

내 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 (object, path, value) 객체의 경로 속성 값을 설정합니다. 경로의 일부가 존재하지 않으면 생성됩니다.

https://lodash.com/docs#set

따라서 귀하의 예는 다음과 같습니다. _.set($scope, the_string, something);

이미 주어진 답변에 추가하기 위해 다음이 저에게 효과적이었습니다.

HTML :

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

$index루프 인덱스는 어디에 있습니까 ?

자바 스크립트 (여기서는 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']);

또는 조금 더 efford로.

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 개체처럼 취급하면됩니다.

이것은 JSON 데이터 배열에 대한 API 성공 응답에 사용하는 것입니다.

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}}는 데이터 주체 이름의 배열을 반환하며,이 예에서는 $ scope의 {{jobs}}, {{customers}}, {{staff}} 등에 대한 범위 속성이 있습니다. jobs, $ scope.customers, $ scope.staff