एक घटक में तालिका के रूप में ng-repeat कैसे प्रदर्शित करें? मेरा आइटम घटक तालिका पंक्तियों के रूप में डेटा प्रदर्शित क्यों नहीं कर रहा है?

यहां एक प्लंकर और कोड भी दिया गया है:

Index.html

<body ng-controller="MainCtrl as vm">
    <table border="1">
        <tbody>
            <item data="name" ng-repeat="name in vm.names"></item>
        </tbody>
    </table>
</body>

आइटम.एचटीएमएल

<tr>
  <td>{{$ctrl.data.first}}</td>
  <td>{{$ctrl.data.family}}</td>
</tr>

App.js

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

app.controller('MainCtrl', function($scope) {
  var vm = this;
  vm.names = [{family: "dela cruz", first: "juan"}, {family: "tamad", first: "juan"}]
});

angular.module('plunker').component('item', {
   templateUrl: 'item.html',
   bindings: {
     data: '='
   }
});
1
basagabi 2 मार्च 2017, 12:51
2
ऐसा इसलिए होता है क्योंकि tbody के बाहर <tr>...</tr> अमान्य html है और एक ब्राउज़र टैग को हटा देता है। एंगुलर को tr देखने का बिल्कुल भी मौका नहीं मिलता
 – 
Max Koretskyi
2 मार्च 2017, 13:07
@ मैक्सिमस, जब मैं <item> घटक <tbody> टैग के अंदर हूं तो यह बाहर कैसे आता है?
 – 
basagabi
2 मार्च 2017, 13:10
जब कोणीय लोड होता है और टेम्पलेट को tbody\ में डालने से पहले उसका मूल्यांकन करता है
 – 
Max Koretskyi
2 मार्च 2017, 13:11
देखें यह उत्तर
 – 
Max Koretskyi
2 मार्च 2017, 13:14

1 उत्तर

सबसे बढ़िया उत्तर

याद रखें कि तत्व तालिका के भीतर रखा जाता है और मानक HTML तालिका -> tbody -> tr -> td संरचना को तोड़ने के लिए जाता है।

इस विशेष मामले के लिए, मैं निम्नलिखित कार्य करूंगा:

angular
  .module('sampleApp', [])
  .controller('MainCtrl', function() {
    var vm = this;
    vm.names = [{family: "dela cruz", first: "juan"}, {family: "tamad", first: "juan"}];
  })
  .component('nameTable', {
     template: [
      '<table border="1">',
      '<tbody>',
      '<tr ng-repeat="name in $ctrl.data">',
      '<td>{{name.first}}</td>',
      '<td>{{name.family}}</td>',
      '</tr>',
      '</tbody>',
      '</table>'
     ].join(''),
     bindings: {
       data: '<'
     }
  });
<body ng-app="sampleApp" ng-controller="MainCtrl as vm">
  <name-table data="vm.names" ></name-table>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
</body>
2
Gorka Hernandez 2 मार्च 2017, 13:10
template पर हार्ड-कोडेड एचटीएमएल के बजाय, मैंने एक item.html बनाया और वहां एचटीएमएल कोड डंप किया। यह अब काम करता है! धन्यवाद!
 – 
basagabi
2 मार्च 2017, 13:20