2016-08-08 7 views
0

, имеющие данные, как:, как использовать нг-повтор для элементов массива в объекте, который находится внутри другого объекта в одном нг-повторе

{ 
    "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" 
    } 
    ] 
    } 
} 

, имеющий ключи «obj11» и «obj12», хочет нг-повтор определенный блок HTML-кода для элементов, соответствующих этим конкретным ключам внутри obj1. Этот повторяющийся блок в основном содержит «имя» и «roll_number», соответствующие каждому объекту в массиве.

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

если KeyValue является 'obj11', выход:

Tim

Том

Запретить

ответ

0

Присвоить keyValue к $scope переменной, а затем использовать его без кавычек:

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

JS:

$scope.keyValue = "obj12"; 
0

Вы не можете пройти как obj11 и obj12 с помощью одного нг-повтор. так как оба obj11 и obj12 дополнительно вложены. Вам нужно вложенное ng-repeat, как показано ниже. Принимая во внимание все JSON, чтобы быть отнесены к некоторой переменной «данных»:

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

Вместо того, чтобы делать obj1['keyValue'] что означает, что ключ является буквенное значение keyValue, привязать его как переменную области видимости.

Итак, установите $scope.keyValue = "obj11"; где значение является ключом. И затем получить к нему доступ, как obj1[keyValue] в ng-repeat

0

Один из многих способов, которыми вы можете выполнить то, что хотите.

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>

 Смежные вопросы

  • Нет связанных вопросов^_^