ProgramingTip

ng-repeat : 객체 배열의 각에 대한 액세스 키 및 값

bestdevel 2020. 12. 7. 20:27
반응형

ng-repeat : 객체 배열의 각에 대한 액세스 키 및 값


object-의 배열 나는을 가지고 있고 그것을 ng-repeat반복 하기 위해 사용하고 있습니다. 배열은 다음과 가변합니다.

$scope.steps = [
    {companyName: true},
    {businessType: true},
    {physicalAddress: true}
];

그리고 내 ng-repeat속성은 다음과 가변합니다.

<div ng-repeat="step in steps"> ... </div>

각 반복에서 예상 step대로 수업 중 하나와 가변합니다. 어쨌든 step모든 액세스 할의 키와 값에 모두 액세스 할 수 있습니까? 그래서 다음과 같이 할 수 있습니다.

<div ng-repeat="(stepName, isComplete) in steps"> ... </div>

여기서 stepName== 'companyName'isComplete== true. 이 작업을 시도했지만 stepName항상 단계 개체의 보안이 적용 됩니다. ng-repeat키와 값을 얻을 수있는 구문 을 작성하는 다른 방법이 있는지 알아 내고 합니다.

모든 아이디어 / 제안에 감사드립니다. 매우 감사합니다.

추신. 내 현재 해결 방법은 컨트롤러 에서이 작업을 수행하는 것입니다.

$scope.stepNames = [];
angular.forEach($scope.steps, function(isComplete, stepName){
     $scope.stepNames.push({stepName: stepName, isComplete: isComplete});
});

그런 다음이를 반복하지만 뷰에서 모든 작업을 수행하는 것이 좋습니다.


중계기 내부의 중계기

<div ng-repeat="step in steps">
    <div ng-repeat="(key, value) in step">
        {{key}} : {{value}}
    </div>
</div>

사실, 데이터는 잘 설계되지 않습니다. 다음과 같은 것을 사용하는 것이 좋습니다.

$scope.steps = [
    {stepName: "companyName", isComplete: true},
    {stepName: "businessType", isComplete: true},
    {stepName: "physicalAddress", isComplete: true}
];

그러면 원하는 작업을 쉽게 수행 할 수 있습니다.

<div ng-repeat="step in steps">
 Step {{step.stepName}} status : {{step.isComplet}}
</div>

예 : http://jsfiddle.net/rX7ba/


이것이 당신을위한 옵션 인 경우에, 당신이 당신의 데이터를 형태로 갖추고면 당신이 바라는대로 작동합니다 :

$scope.steps = {
 companyName: true,
 businessType: true,
 physicalAddress: true
};

여기에 이것의 바이올린이 있습니다 : http://jsfiddle.net/zMjVp/


한 방식에 문제는 데이터를 디자인합니다. 의미론에서 나에게 그것은 의미가 없습니다. 단계는 정확히 무엇입니까?

한 회사의 정보를 저장하고?

이 경우 단계는 선언하고 (KayakDave의 답변 참조) 각 "단계"는 클래스 속성이어야합니다.

여러 회사의 정보를 저장합니까?

이 경우 단계는 객체의 배열이어야합니다.

$scope.steps=[{companyName: true, businessType: true},{companyName: false}]

두 경우 모두 한 번 (두 번째 경우 두 번) ng-repeat로 데이터를 쉽게 반복 할 수 있습니다.


반복기를 중첩 할 필요가없는 또 다른 방법이 있습니다.

로부터 AngularJS와 문서 :

다음 구문을 사용하여 ngRepeat를 가져와 객체의 속성을 반복 할 수 있습니다.

<div ng-repeat="(key, value) in steps"> {{key}} : {{value}} </div>

Angular 1.3.12에서 더 이상 내부 ng-repeat가 필요하지 않은 것처럼 보이며 외부 루프는 컬렉션의 값을 반환하는 단일 맵 항목입니다.

참고 URL : https://stackoverflow.com/questions/19544904/ng-repeat-access-key-and-value-for-each-object-in-array-of-objects

반응형