AngularJs에서 동적 범위 변수 설정-범위.
나는 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
Using Erik's answer, as a starting point. I found a simpler solution that worked for me.
In my ng-click function I have:
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
I've tested it with and without $scope.$apply. Works correctly without it!
Create Dynamic angular variables from results
angular.forEach(results, function (value, key) {
if (key != null) {
$parse(key).assign($scope, value);
}
});
ps. don't forget to pass in the $parse attribute into your controller's function
If you are ok with using Lodash, you can do the thing you wanted in one line using _.set():
_.set(object, path, value) Sets the property value of path on object. If a portion of path does not exist it’s created.
So your example would simply be: _.set($scope, the_string, something);
Just to add into alread given answers, the following worked for me:
HTML:
<div id="div{{$index+1}}" data-ng-show="val{{$index}}">
Where $index
is the loop index.
Javascript (where value
is the passed parameter to the function and it will be the value of $index
, current loop index):
var variable = "val"+value;
if ($scope[variable] === undefined)
{
$scope[variable] = true;
}else {
$scope[variable] = !$scope[variable];
}
Please keep in mind: this is just a JavaScript thing and has nothing to do with Angular JS. So don't be confused about the magical '$' sign ;)
The main problem is that this is an hierarchical structure.
console.log($scope.life.meaning); // <-- Nope! This is undefined.
=> a.b.c
This is undefined because "$scope.life" is not existing but the term above want to solve "meaning".
A solution should be
var the_string = 'lifeMeaning';
$scope[the_string] = 42;
console.log($scope.lifeMeaning);
console.log($scope['lifeMeaning']);
or with a little more 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 ']);
Since you can access a structural objecte with
var a = {};
a.b = "ab";
console.log(a.b === a['b']);
There are several good tutorials about this which guide you well through the fun with JavaScript.
There is something about the
$scope.$apply();
do...somthing...bla...bla
Go and search the web for 'angular $apply' and you will find information about the $apply function. And you should use is wisely more this way (if you are not alreay with a $apply phase).
$scope.$apply(function (){
do...somthing...bla...bla
})
If you are using Lodash library below is the way to set a dynamic variable in the angular scope.
To set the value in the angular scope.
_.set($scope, the_string, 'life.meaning')
To get the value from the angular scope.
_.get($scope, 'life.meaning')
If you were trying to do what I imagine you were trying to do, then you only have to treat scope like a regular JS object.
This is what I use for an API success response for JSON data array...
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;
});
}
Now {{subjects}} will return an array of data subject names, and in my example there would be a scope attribute for {{jobs}}, {{customers}}, {{staff}}, etc. from $scope.jobs, $scope.customers, $scope.staff
'Programing' 카테고리의 다른 글
Python 간단한 if 또는 논리 문 (0) | 2020.08.25 |
---|---|
함수에서 조기 반환의 효율성 (0) | 2020.08.25 |
RuntimeException : 응용 프로그램을 인스턴스화 할 수 없습니다. (0) | 2020.08.25 |
int가 null인지 확인하는 방법 (0) | 2020.08.25 |
디렉티브 테스트에서 $ apply 대 $ digest (0) | 2020.08.25 |