logo
down
shadow

How to look up a value in AngularJS and display data in HTML table


How to look up a value in AngularJS and display data in HTML table

By : Mike
Date : November 22 2020, 02:42 PM
will help you I currently am getting to sets of JSON data back from a restul GET call. The first response set is used to build a HTML table of data. One of those values is an numeric ID from a data table in the DB. , Assuming you have $scope.orgs in your controller, how about
code :
<td ng-model="item.OrgUid" ng-repeat="org in Orgs track by org.OrganizationUid">{{lookup[org.OrganizationUid].OrganizationDisplay}}</td>
var lookup = {};
for (var i = 0, len = orgs.length; i < len; i++) {
    lookup[array[i].OrganizationUid] = array[i];
}
var myApp = angular.module('myApp', []);

myApp.controller('myController',
  function($scope) {
    $scope.Orgs = [{
      OrgUid: 1,
      OrgDisplay: 'Org 1'
    }, {
      OrgUid: 2,
      OrgDisplay: 'Org 2'
    }, {
      OrgUid: 3,
      OrgDisplay: 'Org 3'
    }];
    $scope.Items = [{
      OrgUid: 1,
      Active: 'Y',
      StartDate: "12/1/1984"
    }, {
      OrgUid: 2,
      Active: 'Y',
      StartDate: "12/1/1984"
    }, {
      OrgUid: 3,
      Active: 'Y',
      StartDate: "12/1/1984"
    }];

    $scope.lookup = {};
    for (var i = 0, len = $scope.Orgs.length; i < len; i++) {
      $scope.lookup[$scope.Orgs[i].OrgUid] = $scope.Orgs[i];
    }
  });
.item {
  border:1px solid green; 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp" ng-controller="myController"> 
  
<body>
  <span class="item" ng-model="item.OrgUid" ng-repeat="item in Items">{{lookup[item.OrgUid].OrgDisplay}}</td>
  </body>
</html>


Share : facebook icon twitter icon
How can i use Angularjs and Datatables to display data in an html table

How can i use Angularjs and Datatables to display data in an html table


By : chenna
Date : March 29 2020, 07:55 AM
Any of those help thank you all for your answers, they gave me great ideas to work around the task. i managed to figure out how to do it. I got an idea from this and i managed to come up with this code that worked for me. Hope it helps someone with the same problem app.controller('withOptionsCtrl', withOptionsCtrl); function withOptionsCtrl($scope, DTOptionsBuilder, DTColumnDefBuilder){
code :
$scope.dtOptions = DTOptionsBuilder.newOptions()
    .withPaginationType('full_numbers')
    .withDisplayLength(5)
    .withDOM('pitrfl');
$scope.dtColumnDefs=[
DTColumnDefBuilder.newColumnDef(0),
DTColumnDefBuilder.newColumnDef(1).notVisible,
DTColumnDefBuilder.newColumnDef(2).notVisible,
DTColumnDefBuilder.newColumnDef(3).notVisible,
DTColumnDefBuilder.newColumnDef(4).notVisible,
DTColumnDefBuilder.newColumnDef(5).notVisible,
DTColumnDefBuilder.newColumnDef(6).notVisible
];
How to display Object as complex html table in angularjs

How to display Object as complex html table in angularjs


By : Mayur Sahdev
Date : March 29 2020, 07:55 AM
Any of those help Need to map this to a different data structure as well as an array of customers
code :
 <table class='tbl'>
   <thead>
     <tr>
       <th></th>
       <th>total</th>
       <th ng-repeat="customer in customers">{{customer}}</th>          
     </tr>
   </thead>
   <tbody>
     <tr ng-repeat='(name, data) in criteria'>
       <td>{{name}}</td>
       <td>{{data.Total}}</td>
       <td ng-repeat="customer in customers">
           {{data[customer] ? data[customer]  : 'N/A' }}
       </td>
     </tr>
     </tbody>
   </table>
var customers = {},
    criteria = {};

data.forEach(function(item){
   customers[item.CustomerName]=true;
   if(!criteria[item.CriteriaName]){   
      criteria[item.CriteriaName]= {Total:item.Total}
   }
   criteria[item.CriteriaName][item.CustomerName]  = item.Points;
});

$scope.customers = Object.keys(customers).sort();
$scope.criteria = criteria;
Display dynamic column name using angularjs for html table

Display dynamic column name using angularjs for html table


By : raluca1
Date : March 29 2020, 07:55 AM
Any of those help I just prepared a data and want to display in html table but the problem is that every time I call the $http service it returns n number of columns. So basically what I want to display is that first row of the data should be used for column names and rest are rows. Sure the column names are not fixed there could be n number of columns. Below is the sample data: , OK based on the data provided, give it a try
code :
<table>
  <thead ng-repeat="columns in NewTable | limitTo:1">
    <tr ng-repeat="column in columns">
      <th>{{ column }}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="rows in NewTable.slice(1,NewTable.length)">
      <td ng-repeat="row in rows">{{ row }}</td>
    </tr>
  </tbody>
</table>
Display dropdown on table data cell in html using angularjs

Display dropdown on table data cell in html using angularjs


By : user2034754
Date : March 29 2020, 07:55 AM
To fix this issue The problem with your code is that you are using the same ngModel botId for each row in your repeater.
It would be better to have a different object to store the selection value per each item, so you can fill it right after your data is returned from the API call. Something like this illustrates the described approach:
code :
angular.module("myApp", [])
    .constant('POSSIBLE_OPTIONS', ['A', 'B', 'C'])
    .controller("MyController", ['POSSIBLE_OPTIONS', function (POSSIBLE_OPTIONS) {
        var ctrl = this;

        ctrl.display_republish_records = [
            {botMainId: "A", botSet: "HK64604", botNumber: "786443174705883702"},
            {botMainId: "A", botSet: "HK65825", botNumber: "595143174706013402"},
            {botMainId: "A", botSet: "HK67383", botNumber: "281943174706142702"},
            {botMainId: "B", botSet: "HK72557", botNumber: "922443174706654102"},
            {botMainId: "B", botSet: "HK73332", botNumber: "724243174706716502"},
            {botMainId: "A", botSet: "HK74025", botNumber: "379943174706764502"},
            {botMainId: "A", botSet: "HK74694", botNumber: "825843174706807002"},
            {botMainId: "C", botSet: "HK74819", botNumber: "563543174706827202"},
            {botMainId: "C", botSet: "HK75964", botNumber: "423643174706902802"},
            {botMainId: "B", botSet: "HK76384", botNumber: "678043174706923902"}
        ];

        ctrl.posibbleOptions = getUniqueValuesV2(ctrl.display_republish_records, 'botMainId')
            .map(optionsMapper);

        ctrl.posibbleOptionsFromConstant = POSSIBLE_OPTIONS
            .map(optionsMapper);

        ctrl.selectionModel = {};

        angular.forEach(ctrl.display_republish_records, function (bot) {
            ctrl.selectionModel[bot.botNumber] = ctrl.posibbleOptions.filter(function (opt) {
                return opt.id === bot.botMainId;
            })[0];
        });

        function optionsMapper(id) {
            return {
                id: id,
                name: id
            }
        }


        function getUniqueValues(array, prop) {
            return [...new Set(array.map(item => item[prop]))];
        }
        
        function getUniqueValuesV2(array, prop) {
          return array.map(function(item) {
                      return item[prop];
                    }).filter(function(item, i, ar){ 
                      return ar.indexOf(item) === i;  
                    });
        }

    }]);
pre {
    max-width: 100%;
    word-break: break-word;
    white-space: pre-wrap;
}
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController as $ctrl">
    <hr/>

    <table>

        <tr valign="middle" st-select-row="row" st-select-mode="multiple"
            ng-repeat="row in $ctrl.display_republish_records track by row.botNumber"
            ng-attr-id="{{::row.botMainId}}-{{::row.botNumber}}">
            <td>
                <select class="custom-select" style="margin-left:0px" ng-model="$ctrl.selectionModel[row.botNumber]"
                        ng-options="choice.name for choice in $ctrl.posibbleOptions track by choice.id">
                    <option value="" hidden readonly="" ng-hide="true"></option>
                </select>
            </td>
            <td ng-bind="row.botSet"></td>
            <td ng-bind="row.botNumber"></td>
        </tr>

    </table>


    <hr/>

    <h3>Debug info:</h3>

    <code>
        <pre>{{$ctrl.posibbleOptionsFromConstant}}</pre>
    </code>
    <hr/>

    <code>
        <pre>{{$ctrl.posibbleOptions}}</pre>
    </code>
    <hr/>

    <code>
        <pre>{{$ctrl.selectionModel}}</pre>
    </code>

</div>
How to display data from normal HTML table to Angular Material Table? i want exact my HTML into mat table html.!

How to display data from normal HTML table to Angular Material Table? i want exact my HTML into mat table html.!


By : argasoft
Date : March 29 2020, 07:55 AM
This might help you You can do this without creating an Interface also, here is a working StackBlitz example
In app.module.ts:
code :
import {MatTableModule} from '@angular/material/table';
imports: [MatTableModule]
ELEMENT_DATA: any[] = [
    {
        Id: 1,
        Name: "Test"
    },
    {
        Id: 2,
        Name: "Beispiel"
    },
    {
        Id: 3,
        Name: "Sample"
    }
];
displayedColumns: string[] = ['Id', 'Name'];
dataSource = this.ELEMENT_DATA;
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container matColumnDef="Id">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.Id}} </td>
  </ng-container>
  <ng-container matColumnDef="Name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.Name}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
Related Posts Related Posts :
  • How to hide a div from angular controller
  • Can Promise load multi urls in order?
  • How enable Hover event for bootstrap menus?
  • D3 scale.invert() isn't returning date for x
  • Parsing object to array using underscore js or lodash
  • ES6 with React and Browserify
  • AngularJS Factory return type undefined
  • javascript follow html input fields
  • how to declare a double array in javascript for this particular UI
  • Jquery : find length of mixed list
  • Returning the array before the function is complete & Angular JS
  • Javascript set value of class & hidden input in nested divs
  • Register custom filters with vue.js
  • Add class to input parent
  • Angular controller not talking to view
  • Trouble creating "if then" Javascript statement to change background color of page
  • Socket.IO - Middleware and scoping: how should I access global IO object from external middleware?
  • add class when input is valid in angularjs
  • Positioning multiple div elements
  • Checkbox clicking works, deselecting checkbox not working Javascript
  • Adding ajax jQuery File upload
  • Creating a dynamic array within a dynamic array in JQuery
  • Multiple File Upload actions for a single File Input PHP/JS
  • Want to move an added element to a different part of the DOM
  • Why can't I get Angularjs to work?
  • Minimizing browser window in Firefox & Chrome adds white space to right of page
  • I need to insert the date and time of employee stamp in and out into mysql database
  • Making css auto slider
  • why can't I defne the function first?
  • Pagination with MongoDB in Node.js (With Sorting)
  • How to repeat each() without page refresh
  • Position div at position of another div
  • Click handler is called multiple times in jQuery animate
  • How to multiply each element in an array with a different number (javascript)
  • Constructing a query string for JQuery getJSON for a public API GET request
  • Server side error generating RSS - what to return back to user/RSS reader?
  • ES6 code on Nodejs 4.x : Is V8 4.5 a native JS engine that runs ES6 directly?
  • How to only get new data without existing data from a Firebase?
  • How to set default option d3.js
  • using enum in Javascript for month number against name
  • React component only changes state on second onClick event
  • JavaScript text area: add line break
  • Unobtrusive jQuery unobtrusive validation not showing error spans
  • get the location for objects in a firebase array?
  • Multiple addEventListener not storing unique callbacks
  • JQuery, variable inside function not recognized by action
  • User input in Javascript
  • JavaScript Regex Remove Content from String
  • Is there a way to apply a mask on keydown? (JQuery)
  • Redirect A Live Website Visitor Without Them Refreshing or Clicking anything?
  • Exclude HTML tags when translating with Google Translate API
  • Posting to a ColdFusion function from angularJS
  • How to nullify the fadeout?
  • JS not updating on enquire.js breakpoints
  • AngularFire Check if item of same title exists
  • add names to objects based on object value
  • When do you use "class" versus "id"?
  • Get content of loaded SVG file
  • How to find size of an image file from canvas?
  • ui-sref="articles.view({articleId: article._id})" meaning?
  • shadow
    Privacy Policy - Terms - Contact Us © animezone.co