angular js using ng-table in a simple example

I am currently utilizing meteor and attempting to implement the basic example provided on the ng-tables site. However, I am experiencing an issue where only the filters and sort boxes are displayed, but not the data itself.

<body ng-app="myApp">
  <h1>#best programmer</h1>
  <p>interns rock!</p>
  <div ng-controller="tableControl">
    <table ng-table="vm.tableParams" class="table" show-filter="true">
      <tr ng-repeat="user in $data">
          <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
              {{user.name}}</td>
          <td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
              {{user.age}}</td>
      </tr>
  </table>
</div>


</body>

<link rel="stylesheet" href="https://cdn.rawgit.com/esvit/ng-table/v1.0.0/dist/ng-table.min.css">

JS code

import angular from 'angular';
import angularMeteor from 'angular-meteor';

import './index.html';

angular.module("myApp", ["ngTable"])
  .controller('tableControl', tableControl);
  tableControl.$inject = ["NgTableParams"];

   function tableControl (NgTableParams) {

    var self = this;
    var data = [{name: "Moroni", age: 50},{name: "Moroni", age: 50},{name: "Moroni", age: 50},{name: "Moroni", age: 50} /*,*/];
    self.tableParams = new NgTableParams({
              page: 1, // show first page
              count: 10 // count per page
    }, { dataset: data});

  }

Answer №1

html
<div class="container">
  <div class="row">
    <div class="panel panel-primary">
      <div class="panel-content">
        <table ng-table="tableParams" class="table table-striped">
          <tbody>
            <tr ng-repeat="row in dataList">
              <td data-title="'ID'" align="right">{{$index+1}}</td>
              <td data-title="'Employee Code'">{{ row.empCode }}</td>
              <td data-title="'First Name'">{{ row.firstName }}</td>
              <td data-title="'Last Name'">{{ row.lastName }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`
var myModule = angular.module('myModule', ['ngRoute', 'ngTable']);
myModule.controller('employeeCtrl', ['$http', '$scope', 'ngTableParams',
    function ($http, $scope, ngTableParams) {
    
    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 5          // items per page
    }, {
        total: 0, // total data count
        getData: function () {
            $http({
                method: 'GET',
                url: basePath + '/api/data'
            }).success(function (response) {
                $scope.dataList = response;
            });

        }
    });
}]);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to fix the error message 'yarn package has unresolved peer dependency'

Whenever I run yarn upgrade or install, a bunch of warnings pop up due to unmet peerDependencies. warning " > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4322332c2f2f2c6e2f2a2d286e2b37373303726d766d7a">[email pro ...

Unable to integrate the datepicker module into angular.js framework

I encountered an issue when trying to integrate the angular-datepicker module using angular.js. Error: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.6/$injector/modulerr?p0=Channabasavashwara&…0at%20d%20(http%3A%2F%2Fodite ...

Authenticate the user by comparing the entered username and password with the database records. If they match, proceed to redirect the user to their profile page. Otherwise, log

Attempting to complete this assignment which involves a user entering their username and password. If the information matches what is stored in the database, the user should be redirected to their profile page where a personalized greeting message is displ ...

Removing an element from an array in a Laravel database using AngularJS

I am currently working on a project where I need to delete an item from my Laravel database, which is a simple Todo-List application. To achieve this, I have implemented a TodosController in my main.js file using AngularJS and created a Rest API to connect ...

Displaying a Div element containing dynamically calculated values based on selected options in Angular

As a newcomer to Angular, I decided to challenge myself by building a simple app. Currently, my select options only display the keys of a data object. What I really want to achieve is to show a value beneath the second select box for each team, which displ ...

Combining multiple API requests using NodeJS

I'm currently experimenting with SteamAPI to enhance my understanding of NodeJS. My aim is to retrieve game information after making an initial request to obtain the player's profile and storing the game IDs in an array. However, I am facing a ch ...

What is the process for appending a file extension to a Next.js URL?

For instance, I am attempting to redirect the URL : https://example.com/data/publications to this : https://example.com/data/publications.json I made an attempt using Next.js redirection, but encountered difficulty when trying to add a string that does no ...

Why doesn't express.js throw an error when the variable 'app' is used within its own definition?

When working with express.js, I find it puzzling that createApplication() does not throw an error. This is because it uses app.handle(...) within an anonymous function that defines the same variable 'app'. I attempted to replicate this in jsFidd ...

Looking to confirm client-side text in NodeJS?

As I work on constructing a to-do list, one challenge I am encountering is confirming that the correct task has been checked off. While considering using unique IDs for each individual task may seem like a solution, there is still the risk of users manipul ...

The functionality of Webdriver.waitUntil is not meeting the expected outcomes

I'm currently utilizing webdriverio version 4.5: ./node_modules/.bin/wdio -v v4.5.2 In my scenario, I am in need of waiting for the existence of a specific element and handling the situation if it doesn't exist. Here is an example code snippet ...

Is it possible to find a match by searching through multiple arrays for a corresponding variable name?

Hi there, I'm currently working on a function that triggers an alert if the name of an array of images matches the data attribute of the selected element. This is just a test phase before proceeding with my main project, but I've hit a roadblock. ...

Click the link to copy it and then paste the hyperlink

I am facing an issue with copying and pasting file names as hyperlinks. I have checkboxes next to multiple files and a share button. When I check the boxes and click on the share button, I want to copy the download URLs for those files. Although I can succ ...

Two Elements Linked Together

I'm facing an issue with my interconnected React components. Despite being separate entities, they appear to share some styling attributes which I find puzzling. The main problem lies in the footer component as it seems linked to another component, p ...

Interact with multidimensional arrays using Vue JS

Is there a way to access properties within objects nested inside multidimensional arrays when using v-for with VueJS? var arr =[{"fruit": {"fruitName": "apple"}, "vegetable":[{"vegetableName": "carrot" }]}]; I am attempting to display it in the following ...

What is the best way to incorporate a gratitude note into a Modal Form while ensuring it is responsive?

Currently, I have successfully created a pop-up form, but there are two issues that need fixing. The form is not responsive. After filling/submission, the form redirects to a separate landing page for another fill out. Expected Outcome: Ideally, I would ...

The jQuery AJAX function successfully executes, but the MySQL post deletion operation fails to take place

I am encountering an issue with this particular code. The Ajax code runs through to the end and then fades out the parent of the delete button. Below is the code for the delete button, post, and Ajax: <?php include('php/connect.php'); ...

Filtering JSON data in AngularJS is simple and effective

I am working with JSON data and I want to display it filtered by genre. The solution provided in the previous question How to filter JSON-Data with AngularJs? did not work for me. Here is myapp.js: var myApp = angular.module('myApp', []); myAp ...

How can you retrieve the `categoryIds` key within an object that holds an array of mongodb's `ObjectId(s)` as its value?

In my Node.js code, I have the following: var getQuestionsByUserId = function (config) { var query = { _id: ObjectId(String(config.userId)) }; var projection = { categoryIds: true, _id: false }; var respondWithCategories = function (error, doc ...

Disabling the past dates on a date picker based on the selected date from another date picker

Is it possible to disable past dates in the End Date picker based on the selected date in the Start Date picker? For example: If I choose 20th November 2019 as the Start Date, I want to prevent selection of any past dates in the End Date picker. <ht ...

Using global variables in NodeJS MySQL is not supported

Why am I unable to access the upcoming_matches array inside the MySQL query callback? Whenever I try to log upcoming_matches[1], I get a 'TypeError: Cannot read property '1' of null' error message in the console. This indicates that th ...