Как перенести введенные значения ng-модели в таблицу в Angular?

Question

Как перенести введенные значения ng-модели в таблицу в Angular?

0

Я пытаюсь заполнить данные json в таблице, используя ng-repeat через функцию clickButton. У меня есть 2 поля (firstName/lastName). Я хотел бы ввести firstName или lastName, чтобы вывести все результаты в таблицу. Это функция js?

функция js

$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>

Здесь Plnkr.

Angular_Newbie 25 июнь 2015, в 20:03

Источник

Теги:

javascript

angularjs

json

angularjs-ng-repeat

2 ответа

0

Я внес небольшие изменения.

Я назначил вызов $ scope.reset() после forEach. Таким образом, введенные данные доступны для обработки и не сбрасывают его на пустые. И используется один временный массив.

Вот окончательный JS

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


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

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

            });
        }
    });

    $scope.results = arrItem;

    $scope.reset();

}

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

    };

Вот обновленный плункер

RIYAJ KHAN 25 июнь 2015, в 17:07

Ещё вопросы

Sudhansu Choudhary · Accepted Answer · 2015-06-25T16-52-00.000Z

Это то, что вы ищите??

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

angular.module('myApp').controller('myController', ['$scope', '$http',
  function($scope, $http) {
    var 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) {
    //  alert("getting submitted?");

      $scope.items = data;

      angular.forEach($scope.items, function(item) {
       // alert("item.fname is " + item.fname);
        //alert("enteredValue.firstName is " + enteredValue.firstName);
        if (item.fname == enteredValue.firstName || item.lname == enteredValue.lastName) {
          //alert("and here?");
          $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 = '';
      //$scope.results = '';

    };

  }
]);

<!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="[email protected]" src="/angular.js" data-semver="1.3.15"></script>
  <script data-require="ng-table@*" data-semver="0.3.1" src="/ng-table.js"></script>
  <link data-require="ng-table@*" data-semver="0.3.1" rel="stylesheet" href="/ng-table.css" />
  <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="/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>

Да, это. Спасибо .. не заметили, если заявление.
здорово! пожалуйста! Ну, вы можете принять ответ, если он работает в соответствии с вашими требованиями или есть какие-либо другие изменения, требующиеся?