What is the process for transferring ng-model values to a table in Angular?

Question

What is the process for transferring ng-model values to a table in Angular?

My goal is to populate a table with JSON data using ng-repeat by clicking a button. I need to input either a first name or last name in order to display the results in the table. Is this the correct JavaScript function for achieving this?

JavaScript Function:

$scope.clickButton = function(enteredValue) {

$scope.reset();
$scope.items = data;

angular.forEach($scope.items, function (item) {
    if(item.fname === enteredValue || item.lname === enteredValue ){
        $scope.results.push({
            first: item.fname,
            last: item.lname,
            address: item.address,
            phone: item.phone

        });

JSP:

<input id="fName" name="fName" type="text" data-ng-model="enteredValue.firstName" />

 <input id="lName" name="lName" type="text" data-ng-model="enteredValue.lastName" /> 

 <button class="btn btn-primary" data-ng-click='clickButton(enteredValue)'>Button</button>

For a live example, check out Plnkr.

javascript json angularjs angularjs-ng-repeat

Answer 1

Answer №1

Is this the solution you were seeking?

let app = angular.module('myApp', []);

angular.module('myApp').controller('myController', ['$scope', '$http',
  function($scope, $http) {
    let data = $scope.info = [{
        "fname": "Tim",
        "lname": "Hill",
        "address": "Road",
        "phone": "1234"

      },

      {
        "fname": "Sue",
        "lname": "Summers",
        "address": "Street",
        "phone": "4321"

      }
    ];

    $scope.results = [];
    $scope.clickButton = function(enteredValue) {
      $scope.items = data;

      angular.forEach($scope.items, function(item) {
        if (item.fname == enteredValue.firstName || item.lname == enteredValue.lastName) {
          $scope.results.push({
            first: item.fname,
            last: item.lname,
            address: item.address,
            phone: item.phone

          });
        }
      });
      $scope.reset();

    }

    $scope.reset = function() {
      $scope.enteredValue.lastName = '';
      $scope.enteredValue.firstName = '';

    };

  }
]);

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>

  <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9efff0f9ebf2ffecb0f4eddeafb0adb0e6">[email protected]</a>" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
  <script data-require="ng-table@*" data-semver="0.3.1" src="http://bazalt-cms.com/assets/ng-table/0.3.1/ng-table.js"></script>
  <link data-require="ng-table@*" data-semver="0.3.1" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.1/ng-table.css" />
  <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />


  <script src="script.js"></script>

  <style>
    ul {
      border: solid 1px #404040;
      margin: 5px;
    }
    [ng-click],
    [data-ng-click],
    [x-ng-click] {
      cursor: pointer;
    }
  </style>
</head>

<div ng-app="myApp" ng-controller="myController">

  <form name="personForm" ng-submit="clickButton(enteredValue)" novalidate>
    <table>
      <tr>
        <td>
          <label>First Name:</label>
        </td>
        <td>
          <input id="pName" name="pName" type="text" data-ng-model="enteredValue.firstName" />
        </td>
      </tr>

      <tr>
        <td>
          <label>Last Name:</label>
        </td>
        <td>
          <input id="pName" name="pName" type="text" data-ng-model="enteredValue.lastName" />
          <button class="btn btn-primary">Search</button>
        </td>
      </tr>
    </table>
  </form>
  <table>
    <tr data-ng-repeat="result in results">
      <td data-title="'First Name'">{{result.first}}</td>
      <td data-title="'Last Name'">{{result.last}}</td>
      <td data-title="'Address'">{{result.address}}</td>
      <td data-title="'Phone'">{{result.phone}}</td>
    </tr>
  </table>
</div>

</html>

Answer 2

Is this the solution you were seeking?

let app = angular.module('myApp', []);

angular.module('myApp').controller('myController', ['$scope', '$http',
  function($scope, $http) {
    let data = $scope.info = [{
        "fname": "Tim",
        "lname": "Hill",
        "address": "Road",
        "phone": "1234"

      },

      {
        "fname": "Sue",
        "lname": "Summers",
        "address": "Street",
        "phone": "4321"

      }
    ];

    $scope.results = [];
    $scope.clickButton = function(enteredValue) {
      $scope.items = data;

      angular.forEach($scope.items, function(item) {
        if (item.fname == enteredValue.firstName || item.lname == enteredValue.lastName) {
          $scope.results.push({
            first: item.fname,
            last: item.lname,
            address: item.address,
            phone: item.phone

          });
        }
      });
      $scope.reset();

    }

    $scope.reset = function() {
      $scope.enteredValue.lastName = '';
      $scope.enteredValue.firstName = '';

    };

  }
]);

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>

  <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9efff0f9ebf2ffecb0f4eddeafb0adb0e6">[email protected]</a>" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
  <script data-require="ng-table@*" data-semver="0.3.1" src="http://bazalt-cms.com/assets/ng-table/0.3.1/ng-table.js"></script>
  <link data-require="ng-table@*" data-semver="0.3.1" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.1/ng-table.css" />
  <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />


  <script src="script.js"></script>

  <style>
    ul {
      border: solid 1px #404040;
      margin: 5px;
    }
    [ng-click],
    [data-ng-click],
    [x-ng-click] {
      cursor: pointer;
    }
  </style>
</head>

<div ng-app="myApp" ng-controller="myController">

  <form name="personForm" ng-submit="clickButton(enteredValue)" novalidate>
    <table>
      <tr>
        <td>
          <label>First Name:</label>
        </td>
        <td>
          <input id="pName" name="pName" type="text" data-ng-model="enteredValue.firstName" />
        </td>
      </tr>

      <tr>
        <td>
          <label>Last Name:</label>
        </td>
        <td>
          <input id="pName" name="pName" type="text" data-ng-model="enteredValue.lastName" />
          <button class="btn btn-primary">Search</button>
        </td>
      </tr>
    </table>
  </form>
  <table>
    <tr data-ng-repeat="result in results">
      <td data-title="'First Name'">{{result.first}}</td>
      <td data-title="'Last Name'">{{result.last}}</td>
      <td data-title="'Address'">{{result.address}}</td>
      <td data-title="'Phone'">{{result.phone}}</td>
    </tr>
  </table>
</div>

</html>

Answer 3

Answer №2

I have implemented some minor adjustments.

After the forEach block, I have inserted a call to $scope.reset(). This ensures that the entered data remains accessible for processing without being reset to empty. Additionally, I have utilized a temporary array.

Below is the revised JavaScript code:

$scope.results = [];
 $scope.clickButton = function(enteredValue) {


    $scope.items = data; 
    var tempArray = [];

    angular.forEach($scope.items, function (item) {
        if(item.fname === enteredValue.firstName || item.lname === enteredValue.lastName ){
            tempArray.push({
                first: item.fname,
                last: item.lname,
                address: item.address,
                phone: item.phone

            });
        }
    });

    $scope.results = tempArray;

    $scope.reset();

}

    $scope.reset = function() {
        $scope.enteredValue.lastName = '';
        $scope.enteredValue.firstName = '';
        tempArray = [];

    };

You can view the updated version on Plunker.

Answer 4

I have implemented some minor adjustments.

After the forEach block, I have inserted a call to $scope.reset(). This ensures that the entered data remains accessible for processing without being reset to empty. Additionally, I have utilized a temporary array.

Below is the revised JavaScript code:

$scope.results = [];
 $scope.clickButton = function(enteredValue) {


    $scope.items = data; 
    var tempArray = [];

    angular.forEach($scope.items, function (item) {
        if(item.fname === enteredValue.firstName || item.lname === enteredValue.lastName ){
            tempArray.push({
                first: item.fname,
                last: item.lname,
                address: item.address,
                phone: item.phone

            });
        }
    });

    $scope.results = tempArray;

    $scope.reset();

}

    $scope.reset = function() {
        $scope.enteredValue.lastName = '';
        $scope.enteredValue.firstName = '';
        tempArray = [];

    };

You can view the updated version on Plunker.

What is the process for transferring ng-model values to a table in Angular?

Answer №1

Answer №2

Similar questions

Incorporating an external SVG link into a React application

Array of Objects Returned by Mongoose

What is the best way to create a button with a dynamic background animation in React?

Store information in Factory and retrieve it in the controller

Can you help me understand the meaning of the message: [$rootScope:infdig] 10 $digest() iterations reached. Stopping! Watchers activated in the last 5 iterations

Implement a function to delete an item from an array within a React object by utilizing the UseState hook

Exploring the automated retrieval of data from arrays in Java objects: A comprehensive guide

What is the optimal method for storing extracted JSON data?

Embed schema information into HTML tags using JavaScript

What is the best way to send a file object to a user for download?

Ensuring the accuracy of a personalized directive within a form

Modifying pagination numbers with Reactjs: A step-by-step guide

What is the process of adding information to a JSON file?

Scala: Best Practices for Parsing Multiple JSON Files in Subdirectories

What is the best way to create a Snap.svg map using AngularJS?

Getting the error message "t is not a function. (In 't(i,c)', 't' is an instance of Object)" while attempting to switch from using createStore to configureStore with React Redux Toolkit

Loop through the .getJSON response using jQuery

Teaching Selenium how to input text into Google's login field (programming with Python)

Utilizing escape characters in Ionic 2 to import JSON data into a database

How to dynamically update data in Angular without the need for a page refresh or loading?