And item.htmlthere are tons of things like...">
Geek Answers Handbook

How to use components with ng-repeat?

I have this code:

<item ng-repeat="name in names"></item>

And item.htmlthere are tons of things like name.first, name.familyetc.
So the problem is that I cannot access the object namedue to scope.

And I'm embarrassed. should not inherit a component nameat least?

this is my component:

app.component('item', {
   templateUrl: '/views/item.html'
});
+4
source share
2 answers

Here is a plnkr example :

index.html

  <body ng-controller="MainCtrl">
    <item data="name" ng-repeat="name in names"></item>
  </body>

script.js

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

app.controller('MainCtrl', function($scope) {
  $scope.names = [{family: "asdf", first: "test"}, {family: "qwerty", first: "test2"}]
});

angular.module('plunker').component('item', {
   templateUrl: 'item.html',
   bindings: {
     data: '='
   }
});

item.html

{{$ctrl.data.first}}
{{$ctrl.data.family}}
<br>

Basically, you need to use bindings to bind the data that you loop with ng-repeat in order to access it inside your component.

+7
source

You need to bind nameto the component.

Angular :

angular.module('heroApp').component('heroDetail', {
  templateUrl: 'heroDetail.html',
  controller: HeroDetailController,
  bindings: {
    hero: '='
  }
});
0

More articles:


All Articles