Javascript 我怎么做桌子'；组件'；在angular中，它在不同的页面上工作？_Javascript_Angularjs_Coffeescript

Javascript 我怎么做桌子'；组件'；在angular中，它在不同的页面上工作？

javascript angularjs coffeescript

Javascript 我怎么做桌子'；组件'；在angular中，它在不同的页面上工作？,javascript,angularjs,coffeescript,Javascript,Angularjs,Coffeescript,创建可重用表“组件”的正确方法是什么，它将处理来自不同控制器的不同JSON数据。在一个页面上，使用特定的控制器，一个表，在另一个页面上，使用另一个控制器，另一个表我尝试使用一个指令，它将我当前所在页面的控制器作为参数，并将其存储在变量obj中。然后在表的模板中，我做了{{{{obj}.data.length}，它工作得很好，虽然有点慢。我认为这不是正确的做法我的客户经理 angular .module 'app.components.clients', ['app'] .controller

创建可重用表“组件”的正确方法是什么，它将处理来自不同控制器的不同JSON数据。在一个页面上，使用特定的控制器，一个表，在另一个页面上，使用另一个控制器，另一个表

我尝试使用一个指令，它将我当前所在页面的控制器作为参数，并将其存储在变量

obj

中。然后在表的模板中，我做了

{{{{obj}.data.length}

，它工作得很好，虽然有点慢。我认为这不是正确的做法

我的客户经理

angular
.module 'app.components.clients', ['app']
.controller 'ClientsController', ($http, $rootScope, $scope, clientsFactory) ->

  clientsFactory.fetch().then (response) => @data = response.data

  return @

我的路由器的一小部分：

.when '/clients/active/',
      templateUrl: '/components/clients/clientsView.html'
      controller: 'ClientsController as clientsCtrl'

基本上我可以在这个页面上显示没有问题的数据，但我需要为不同的页面显示不同的数据，表头的值将不同，对于客户端，我可能有名字和电子邮件，对于用户，我可以有生日，电子邮件，名字，第二个名字，最后一次活动

我想要一个表格组件，它将从控制器接收数据，并将数据呈现到带有过滤器、分页的表格中…

基于您的上述描述，我创建了简单的表格组件，如下所示- 引用为-

组件代码-

// Code goes here
var app = angular.module('myAPP', []);
app.component("tableComponent", {
  templateUrl: 'tableComponent.html',
  controllerAs: 'model',
  controller: ['utilityService', tableControllerFn]
});

function tableControllerFn(utilityService) {
  var model = this;
  model.listData = [];

  model.$onInit = function() {
    model.listData = utilityService.getTableData();
  }

  model.del = function(id) {
    var index = getSelectedIndex(id);
    if (index > -1) {
      model.listData.splice(index, 1);
    }
  };

  function getSelectedIndex(id) {
    for (var i = 0; i < model.listData.length; i++) {
      if (model.listData[i].id === id)
        return i;
    }
    return -1;
  }
}

app.service('utilityService', function() {
  this.getTableData = function() {
    return [{
      'id': 01,
      'nama': 'Faizah Pratiwi',
      'alamat': 'Malang'
    }, {
      'id': 02,
      'nama': 'Anastasya Putri',
      'alamat': 'Jember'
    }, {
      'id': 03,
      'nama': 'Sharon Natalia',
      'alamat': 'Tulungagung'
    }, {
      'id': 04,
      'nama': 'Faizah Pratiwi',
      'alamat': 'Malang'
    }]; //do intialization
  }
});

//代码在这里
var-app=angular.module（'myAPP'，[]）；
app.component（“tableComponent”{
templateUrl:'tableComponent.html'，
controllerAs:'模型'，
控制器：['utilityService'，tableControllerFn]
});
功能表控制器Fn（实用服务）{
var模型=此；
model.listData=[]；
模型。$onInit=函数（）{
model.listData=utilityService.getTableData（）；
}
model.del=函数（id）{
var索引=getSelectedIndex（id）；
如果（索引>-1）{
模型.listData.splice（索引，1）；
}
};
函数getSelectedIndex（id）{
对于（var i=0；i


组件HTML-
<div>
  <table class="table">
    <tr>
      <th>ID</th>
      <th>Nama</th>
      <th>Alamat</th>
      <th>Action</th>
    </tr>
    <tr ng-repeat="x in model.listData">
      <td>{{x.id}}</td>
      <td>{{x.nama}}</td>
      <td>{{x.alamat}}</td>
      <td>
        <a href="#" ng-click="model.del(x.id)">Delete</a>
      </td>
    </tr>
  </table>
</div>


身份证件
纳米
阿拉马特
行动
{{x.id}
{{x.nama}}
{{x.alamat}}

用法：
<body ng-App="myAPP">
  <table-component></table-component>
</body>


请指定两个控制器是否具有相似的属性。我的意思是，JSON结构是相同的还是不同的？JSON结构是不同的。在这种情况下，您应该创建单个组件来呈现表视图是的，我知道这一点，问题是，如何将数据传递给组件？好的，我在这里创建了示例组件检查-