Угловая работа с двумя «связанными» списками объектов JSON

0

Скажем, у меня есть следующий JSON файл

{
  "A": [
    {"name": "foo",
      "BRef": "123"
    },
    {"name": "Hello",
      "BRef": "456"
    }
  ],

  "B": [
    {"ID": "123",
      "lastName": "bar"
    },
    {
      "ID": "456",
      "lastName": "World"
    }
    ]
}

Я связал модель и посмотрел через контроллер

$http.get('js/data.json')
    .success(function(data) {
      $scope.A = data.A;
      $scope.B = data.B;

Как я прокручиваю A и выкапываю последнее имя из B?

<div ng-repeat="a in A">
 <h1>{{a.name}} {{ <<(B.b.ID == a.BRef).lastname>> }}</h1>
</div>

Думал, что ng-repeat B с фильтром может сделать трюк. Но я не настолько квалифицирован с угловым фильтром (пока)

Теги:

3 ответа

1

Из одного из сообщений, которые были удалены, я действительно нашел элегантное решение, объединив его с ng-show

<div ng-repeat="a in A">
<div ng-repeat="b in B" ng-show="b.ID == a.BRef">

 <h1>{{a.name}} {{b.lastname}}</h1>

</div>
</div>
1

вы можете использовать функцию для имени getLast или использовать вложенный ng-repeat и использовать директиву ng-if для отображения соответствия.

$scope.getLastName = function(BRef){
     var lastName = "";
      angular.forEach($scope.data.B,function(b){
         if(b.ID == BRef)
         lastName = b.lastName;
     });
     return lastName;
 }

на ваш взгляд, используйте

 <div ng-repeat="a in A">
  <h1>{{a.name}} <span ng-bind="getLastName(a.BRef)"></span></h1>
</div>

var editer = angular.module('editer', []);
function myCtrl($scope) {
   $scope.data = {
  "A": [
    {"name": "foo",
      "BRef": "123"
    },
    {"name": "Hello",
      "BRef": "456"
    }
  ],

  "B": [
    {"ID": "123",
      "lastName": "bar"
    },
    {
      "ID": "456",
      "lastName": "World"
    }
    ]
}
   
   $scope.getLastName = function(BRef){
     var lastName = "";
      angular.forEach($scope.data.B,function(b){
         if(b.ID == BRef)
         lastName = b.lastName;
     });
     return lastName;
 }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="editer" ng-controller="myCtrl" class="container">
   <div ng-repeat="a in data.A">
     <h1>{{a.name}} <span ng-bind="getLastName(a.BRef)"></span></h1>
   </div>
  
  OR
  ----------------------------------
  
   <div ng-repeat="a in data.A">
     <h1>{{a.name}} <span ng-repeat="b in data.B" ng-if="b.ID == a.BRef">{{b.lastName}}</span></h1>
   </div>
 
</div>
  • 0
    Мне действительно нравится последнее решение, так как оно может быть применено проще, если я получу другие параметры, чем lastname
0

Я считаю, что SSH прав.

Вы можете использовать метод фильтрации javascript, т.е.

$scope.findCorrespondingLastName(bref) {
    $scope.B.filter(function(b) {
        return b.ID == bref;
    });
}

и в вашем html файле используйте

 <div ng-repeat="a in A">
  <h1>{{a.name}} {{findCorrespondingLastName(a.BRef)[0]['lastName']}}</h1>
</div>

Также попробуйте использовать псевдоним controllerAs и поместите переменные на this контроллере. Использование $scope не рекомендуется в соответствии с последними угловыми документами.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню