Passing ng-model from view to controller angular js

Question

I am trying to pass value like this from view to controller in angular js of this form. I do not wish to hardcode it in this way. How could it be done in proper manner?

angular.module('user').controller('UsersController', ['$scope', '$stateParams', 'Users',
	function($scope, $stateParams, Orders) {
		$scope.create = function() {
			var user = new Users({
				child: [
					{ columnA: child[0].columnA, columnB: child[0].columnB, columnC: child[0].columnC },
					{ columnB: child[1].columnA, columnB: child[1].columnB, columnC: child[1].columnC },
					...
					{ columnC: child[10].columnA, columnB: child[10].columnB, columnC: child[10].columnC }
				]
			});
		}
	}
});

<form data-ng-submit="create()">
  <input type="text" data-ng-model="child[0].columnA">
  <input type="text" data-ng-model="child[0].columnB">
  <input type="text" data-ng-model="child[0].columnC">

  <input type="text" data-ng-model="child[1].columnA">
  <input type="text" data-ng-model="child[1].columnB">
  <input type="text" data-ng-model="child[1].columnC">
  
  ......

  <input type="text" data-ng-model="child[10].columnA">
  <input type="text" data-ng-model="child[10].columnB">
  <input type="text" data-ng-model="child[10].columnC">
</form>

It would be better if an reusable directive that may perform above function.

$scope.create = function() {
    child: toJSON(child);
}

function toJSON(var a) {
    //automatically search through the view for ng-model with child[index].columnName and change to the form above.
}

Not clear what you are asking.Have you tried using ng-repeat? — charlietfl
– charlietfl, Commented Jan 22, 2016 at 3:47
@charlietfl Hi i have no problem with the view currently. This is a post form from view to controller where user submit the form.How could i simplified the assigning data-ng-model process in controller in this case? — stackdisplay
– stackdisplay, Commented Jan 22, 2016 at 4:05
Still not understanding the issue. You do realize that ng-model will automatically create all the objects you have in view if they don't already exist? — charlietfl
– charlietfl, Commented Jan 22, 2016 at 4:12

Claies · Accepted Answer · 2016-01-22 04:57:04Z

I wrote out a plunker that demonstrates one way to do something similar to what you are trying to do using angular practices.

You'll note that I eliminated all the duplication in the view by using ng-repeat, and have made the number of child elements dynamic. I initialized the users object with an empty array, but you could easily initialize the object with data from the server.

Note also that changes to the form are immediately reflected in the object, meaning in the create() function, you can serialize the users object, not the form values. In practice, this is probably not necessary, however, since if you use an angular library like $http, serialization to and from JSON is performed automatically.

$scope.users = {
  child: [{}]
};
$scope.create = function() {
   var data = angular.toJson($scope.users);
   alert(data);
};

$scope.addUser = function() {
  $scope.users.child.push({});
};

<form ng-submit="create()">
  <div ng-repeat="user in users.child">
    <input type="text" ng-model="user.columnA">
    <input type="text" ng-model="user.columnB">
    <input type="text" ng-model="user.columnC">
  </div>
  <button type="submit">Submit</button>
</form>
<button ng-click="addUser()">Add New User</button>

<pre> {{users}}</pre>

The main takeaway from this, however, should be that the view and the controller work together to eliminate duplication and unnecessary references. we are no longer referring to child[0] in the HTML, making the HTML more readable and maintainable.

Collectives™ on Stack Overflow

Passing ng-model from view to controller angular js

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