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

Updating a single document in Node JS using Express is a simple and straightforward process

How can CSS and JavaScript be used to strategically position two upright images next to each other within a dynamically resizing container?

Is there a way to animate without specifying a duration?

The AudioPlayer refuses to play following a track change

What is the best way to clear the cache in AngularJS?

Tips on creating a one-of-a-kind AWS S3 file name

making the div tag invisible when the if statement is satisfied

Vue-Firebase: A guide to linking multiple Firebase services in a single app

Is there anything else I should attempt in order to fix this npm start error?

extract all elements from an array nested within another array

How to retrieve the chosen row in an angularjs UI-GRID when the row selection event occurs

What is the best way to transmit extra data when tunneling a TLS connection?

Using various colors to highlight specific sections of a letter or number

When activated, JavaScript is producing an undefined response

Swap out the image for a div element if the image is not found

Guide to making a language selection wrapper using a gist script

Technique for updating URL when submitting a form on a webpage

Parsley JS: A Solution for Distinct IDs

Despite successfully connecting to my webservice, the ajax function encounters an error

How to include a file within another file in Node.js