AngularJS data push

Question

I have the following AngularJS app.

From $scope.forms I create some inputs on the html part using ng-repeat.

The thing I dont understand is how to push the data from attributes: ["title", "firstname", "lastname", "address"] inputs into values: []

Can someone explain me how to push the input values into my values key? Or maybe if there is a best solution to explain?

function sampleCtrl($scope) {

  $scope.forms = [
    {
      title: "Something",
      attributes: ["title", "firstname", "lastname", "address"],
      values: [] //here i want the values from the attributes
    },
    {
      title: "Something else",
      attributes: ["title", "name", "job", "address"],
      values: [] //here i want the values from the attributes
    }   ]; }

http://jsfiddle.net/U3pVM/18198/

Community · Accepted Answer · 2017-05-23 11:58:38Z

See @Grundy's answer for a direct approach where you don't have to change your model.

Do allow me to suggest a different approach though (that also includes the fact that you need to use ng-model to bind the input's value): model the attribute + value combination as an actual thing. So e.g.:

$scope.forms = [
    {
        title: "Something",
        pairs: [{label: "title", value: ""}, {label: "firstname", value: ""}]
    }
];

This view model is much easier to bind to in a view:

<div ng-repeat="pair in form.pairs">
    <input type="text" placeholder="{{pair.label}}" ng-model="pair.value" />
</div>

The reason I suggest this is because the $scope works best IMO if it's tailored to being bound to in views. If you need the other format (i.e. a values array) perhaps to send it off to a back end service, you'd best map the view model back to the appropriate data format. For example:

var values = $scope.forms[0].pairs.map(function(p) {
    return p.value;
});

See this forked fiddle for a full example.

Grundy · Accepted Answer · 2015-08-27 07:01:27Z

2

You should see about ng-model. as model you can use values[$index] so, in values array values in same order as in attributes.

function sampleCtrl($scope) {

  $scope.forms = [
    {
      title: "Something",
      attributes: ["title", "firstname", "lastname", "address"],
      values: [] //here i want the values from the attributes
    },
    {
      title: "Something else",
      attributes: ["title", "name", "job", "address"],
      values: [] //here i want the values from the attributes
    }
  ];

}

body {
    font-family: courier new;
}

h1 {
    font-size: 24px;
    margin: 0 0 20px;
}

h2 {
    font-size: 18px;
}

.form {
    margin: 0 0 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
    <h1>Form</h1>
    <div ng-controller="sampleCtrl">
      
        <div class="form" ng-repeat="form in forms">
          <h2>{{form.title}}</h2>     
          <div ng-repeat="input in form.attributes">
              <input type="text" ng-model="form.values[$index]" placeholder="{{input}}" />
          </div>
            {{form.attributes}}
            {{form.values}}
        </div>
      
    </div>
  </div>

answered Aug 27, 2015 at 7:01

Grundy

13.4k3 gold badges39 silver badges57 bronze badges

2 Comments

Jeroen Over a year ago

Aye, +1, similar to my solution, only one where OP will not have to change the current $scope's format with two seperate arrays.

Grundy Over a year ago

@Jeroen, yep, in some cases we can't change structure :-) any way main problem OP - he not use ng-model :-)

Imab Asghar · Accepted Answer · 2015-08-27 07:04:17Z

1

I have added the changes to your fiddle:

<div ng-app>
    <h1>Form</h1>
    <div ng-controller="sampleCtrl">

        <div class="form" ng-repeat="form in forms">
          <h2>{{form.title}}</h2>     
          <div ng-repeat="input in form.attributes" ng-init="mod = []">
              <input type="text" placeholder="{{input}}" ng-init="mod[$index] = form.values[$index]" ng-model="mod[$index]"/>
          </div>
       </div>     
   </div>
</div>

http://jsfiddle.net/U3pVM/18201/

answered Aug 27, 2015 at 7:04

Imab Asghar

3161 silver badge7 bronze badges

4 Comments

Grundy Over a year ago

why you use so many ng-init? in this case when you change values in input, they not applied to values array

Imab Asghar Over a year ago

Yeah. just saw your answer it could be done using the form.values array. I thought we would need another array to store the value in, but I was naive. :3

Grundy Over a year ago

anyway, you create new mod array on every nested ng-repepeat iteration :-) just see fiddle: jsfiddle.net/U3pVM/18208

Imab Asghar Over a year ago

Oh yeah. the div gets rendered multiple times and initializes it everytime. should have done ng-init above the ng-repeat. Anyways, Thanks for it. :)

AdityaParab · Accepted Answer · 2015-08-27 07:06:43Z

1

It's simple : Here is updated fiddle

Just added an ng-model that points at the exact same index in attributes array and that of in values array.

  <div ng-app>
    <h1>Form</h1>
    <div ng-controller="sampleCtrl">

        <div class="form" ng-repeat="form in forms">
          <h2>{{form.title}}</h2>     
          <div ng-repeat="input in form.attributes">
              <input type="text" ng-model="form.values[$index]"  placeholder="{{input}}" />
          </div>
        </div>
        <button ng-click="haha()">Test!</button>
    </div>
  </div>

And no change in JS. Only added new function haha() to test it out

function sampleCtrl($scope) {

  $scope.forms = [
    {
      title: "Something",
      attributes: ["title", "firstname", "lastname", "address"],
      values: [] //here i want the values from the attributes
    },
    {
      title: "Something else",
      attributes: ["title", "name", "job", "address"],
      values: [] //here i want the values from the attributes
    }
  ];

    $scope.haha = function(){
        console.log($scope.forms);
    }

}

answered Aug 27, 2015 at 7:06

AdityaParab

7,1003 gold badges30 silver badges40 bronze badges

1 Comment

Grundy Over a year ago

do you have any difference from my answer except haha? :-)

Collectives™ on Stack Overflow

AngularJS data push

4 Answers 4

Comments

2 Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related