2016-08-08 44 views
0

mit Daten innerhalb anderer Gegenstand ist:wie ng-repeat für die Array-Elemente in Objekt zu verwenden, die in einzelnen ng-repeat

{ 
    "obj1":{ 
    "obj11":[ 
    { 
     "name":"Tim", 
     "roll_number":"45" 
    }, 
    { 
     "name":"Tom", 
     "roll_number":"20" 
    }, 
    { 
     "name":"Deny", 
     "roll_number":"42" 
    } 
    ], 
    "obj12":[ 
    { 
     "name":"Jim", 
     "roll_number":"43" 
    }, 
    { 
     "name":"Crook", 
     "roll_number":"46" 
    }, 
    { 
     "name":"Michael", 
     "roll_number":"48" 
    } 
    ] 
    } 
} 

mit Tasten "obj11" und "obj12", wollen ng-repeat ein spezifischer HTML-Code-Block für Elemente, die diesen spezifischen Schlüsseln innerhalb von obj1 entsprechen. Dieser wiederholte Block enthält grundsätzlich 'name' und 'roll_number', die jedem Objekt im Array entsprechen.

<div ng-repeat="item in obj1['keyValue']"> 
    <p>{{item.name}}</p> 
    <p>{{item.roll_number}}</p> 
</div> 

wenn keyValue ist 'obj11', Ausgang:

Tim

Tom

Verweigern

Antwort

0

zuordnen keyValue zu einer $scope Variable, dann ohne die Anführungszeichen verwenden:

ng-repeat="item in obj1[keyValue]" 

JS:

$scope.keyValue = "obj12"; 
0

Sie können nicht sowohl obj11 und obj12 mit einzelner ng-Wiederholung durchqueren. da sowohl obj11 als auch obj12 weiter verschachtelt sind. Sie benötigen eine verschachtelte ng-Wiederholung wie folgt. die gesamte json unter Berücksichtigung einiger Variable „Daten“ zugeordnet werden:

<div ng-repeat="item in data.obj1"> 
    <div ng-repeat="a in item"> 
    <p>{{a.name}}</p> 
    <p>{{a.roll_number}}</p> 
    </div> 
</div> 
0

angular.module('app', []).controller('HomeCtrl', function($scope) { 
 
    $scope.keyValue = "obj11"; 
 

 
    $scope.obj1 = { 
 
    "obj11": [{ 
 
     "name": "Tim", 
 
     "roll_number": "45" 
 
    }, { 
 
     "name": "Tom", 
 
     "roll_number": "20" 
 
    }, { 
 
     "name": "Deny", 
 
     "roll_number": "42" 
 
    }], 
 
    "obj12": [{ 
 
     "name": "Jim", 
 
     "roll_number": "43" 
 
    }, { 
 
     "name": "Crook", 
 
     "roll_number": "46" 
 
    }, { 
 
     "name": "Michael", 
 
     "roll_number": "48" 
 
    }] 
 
    }; 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 

 

 
<div ng-app="app" ng-controller="HomeCtrl"> 
 
    <div ng-repeat="item in obj1[keyValue]"> 
 
    <p>{{item.name}}</p> 
 
    <p>{{item.roll_number}}</p> 
 
    </div> 
 
</div>

Anstatt obj1['keyValue'] tun, was bedeutet, dass der Schlüssel Literalwert keyValue, binden sie als Rahmen variabel ist.

Setzen Sie also $scope.keyValue = "obj11"; wo Wert der Schlüssel ist. Und dann Zugriff wie obj1[keyValue] in der ng-repeat

0

Eine der vielen Möglichkeiten, die Sie erreichen können, was Sie wollen.

var app = angular.module('app', []); 
 

 
app.controller('ctrl', function($scope) { 
 
    
 
    $scope.item = { 
 
    "myItems": { 
 
     "child1": [{ 
 
     "name": "Tim", 
 
     "roll_number": "45" 
 
     }, { 
 
     "name": "Tom", 
 
     "roll_number": "20" 
 
     }, { 
 
     "name": "Deny", 
 
     "roll_number": "42" 
 
     }], 
 
     "child2": [{ 
 
     "name": "Jim", 
 
     "roll_number": "43" 
 
     }, { 
 
     "name": "Crook", 
 
     "roll_number": "46" 
 
     }, { 
 
     "name": "Michael", 
 
     "roll_number": "48" 
 
     }] 
 
    } 
 
    }; 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="app" ng-controller="ctrl"> 
 
    
 
    <select ng-model="key"> 
 
    <option ng-repeat="(key,val) in item.myItems" value="{{key}}">{{key}}</option> 
 
    </select> 
 

 
    <div ng-repeat="item in item.myItems[key]"> 
 
    <p>{{item.name}}</p> 
 
    <p>{{item.roll_number}}</p> 
 
    </div> 
 
</body>