How to submit angular js form using ng-click

Question

I am trying to create a from using json file. So I have a json file I am calling it into my html using angular js I am getting problem when I click on save button which is using ng-click , Here I am trying to use the array of user like this:

       <div ng-repeat="x in myWelcome.definition.attributes">
        <div ng-repeat= "y in x.children ">
          <div ng-if ="y.rm_type_name == 'DV_TEXT'">
             <input type="{{ y.node_id }}" name="{{ y.node_id }}" ng-model="user[y.node_id]">
          </div>
          <div ng-if ="y.rm_type_name == 'DV_CODED_TEXT'">
             <input type="{{ y.node_id }}" name="{{ y.node_id }}" ng-model="user[y.node_id]">
          </div>

        </div>
        <h1>You entered: {{user}}</h1>

      </div>
      <input type="submit" ng-click="update(user)" value="Save" />

And my controller is looking like this :

     $scope.update = function(user) {
       console.log(user);
     };

I am getting the undefined in my console here is the plunker : https://plnkr.co/edit/62g4YhkowQtwkyBOPKi5?p=preview

Nilay Singh · Accepted Answer · 2016-06-10 06:51:02Z

2

You need to add only one line and I think that will work use this inside your controller and no more changes :

 var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $http) {
      $scope.master = {};
      $scope.user = {};
      $scope.update = function(user) {
        $scope.master = angular.copy(user);
        $scope.user = {};
        console.log(user);
      };
      $http.get("data.json")
      .then(function(response) {
          $scope.myWelcome = response.data;
      });
    });

You only need to add this in your controller $scope.user = {}; and it will work

answered Jun 10, 2016 at 6:51

Nilay Singh

2,3516 gold badges36 silver badges67 bronze badges

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

Comments

balajivaishnav · Accepted Answer · 2016-06-10 07:27:20Z

1

Try like this, it's a sample one

<form class="form-horizontal" role="form" ng-app="myApp" ng-controller="MyCtrl">

<input class="form-control" id="tittle" placeholder="tittle" ng-model="formInfo.tittle">

<input class="form-control" id="name" placeholder="Name" ng-model="formInfo.Name">

 <button type="submit" ng-click="saveData()" class="btn btn-success">save</button>

 </form>

var app=angular.module('myApp', []);
  app.controller('MyCtrl', ['$scope', function($scope) {
    $scope.formInfo = {};
    $scope.saveData = function() {
    console.log($scope.formInfo);
    }
  }]);

answered Jun 10, 2016 at 7:27

balajivaishnav

2,8935 gold badges25 silver badges39 bronze badges

Comments

Drag13 · Accepted Answer · 2016-06-10 06:32:22Z

0

Just change ng-click="update(user)" to ng-submit="update(user)" with same definition

answered Jun 10, 2016 at 6:32

Drag13

6,0281 gold badge22 silver badges44 bronze badges

3 Comments

user5236487 Over a year ago

not working why is it not working with ng-click one of my example is working great but what is the problem here please can you see the plunker and help me solve this

Drag13 Over a year ago

use this data-ng-click="update(user)" Your planker already works :)

Drag13 Over a year ago

Have you see any issue still?

Shashank · Accepted Answer · 2016-06-10 07:09:49Z

0

I think you are forgetting the bootstrapping of the AngularJS. Include it in your project using the snippet below:

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

app.controller('test', function($scope) {
  // your code goes here
});

Watch the sample demo for the same.

answered Jun 10, 2016 at 7:09

Shashank

2,1002 gold badges21 silver badges40 bronze badges

4 Comments

user5236487 Over a year ago

ng-model="user[y.node_id]" will this work in above answer it is working

Shashank Over a year ago

sorry, I didn't get you.

user5236487 Over a year ago

instead of writing user.xyd why can't I write user[xyz]

Shashank Over a year ago

you can write in both ways - (1) user.xyd (2) user['xyd'].

Collectives™ on Stack Overflow

How to submit angular js form using ng-click

4 Answers 4

Comments

Comments

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related