Displaying input values of a form in a table using angularJs

Question

I have a form to input the name and then when I click the submit button the input value should be displayed in the table. please find the below code that I wrote.

model.html

<html>
<body ng-controller="myController">
<form ng-submit="addRow()">
<input type="text" ng-model="name"/>
<input type="submit" value="value"/> 
<form/>

<table>
<tr ng-repeat="record in records">
<td>{ {record.name} }<td/>
<tr/>
<table/>
<body/>
<html/>

script.js

myApp.controller('testController,[$scope',function($scope)
{
$scope.records=[];
$scope.addRow = function()
{
$scope.records.push({'name': $scope.name});
};
}]);

But the output table cell shows as { {record.name} }. I want to print the name which I am typing in the text box

Wasef Anabtawi · Accepted Answer · 2019-04-01 10:52:47Z

0

make sure to fix the following :

add ng-app directive to your html and define your module in the js.
controller name is different on your html from what you have in you javascript
- please make sure to close your quotations for 'testController' in js and '$scope' variables.

here is a working jsFiddle link html :

  <body ng-app='myApp' ng-controller="testController">
    <form ng-submit="addRow()">
      <input type="text" ng-model="name" />
      <input type="submit" value="value" />
      <form/>

      <table>
        <tr ng-repeat="record in records">
          <td>{{record.name}} <td/>
         <tr/>
       <table/>
   <body/>
<html/>

javsacript

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

myApp.controller('testController', ['$scope', function($scope) {
  $scope.records = [];
  $scope.addRow = function() {
    $scope.records.push({
      'name': $scope.name
    });
  };
}]);

edited Apr 1, 2019 at 10:52

answered Apr 1, 2019 at 10:47

Wasef Anabtawi

1,0211 gold badge10 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Displaying input values of a form in a table using angularJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related