current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

i have this simple problem that i can't really found a solution for it. so what i am willing to do is inserting to an array values from inputs.

so for example i have this empty array at my controller first : 

   $scope.contents =  [
    {name: "", value: ""}
 ] ;

and i have three input fields that each of them has a label and a value : 

    <label>1st Label</label>
    <input type='text' value='1st Value' />

    <label>2nd Label</label>
    <input type='text' value='2nd Value' />

    <label>3rd Label</label>
    <input type='text' value='3rd Value' />

i want by clicking a button to add the label and the value of each input to the array and i want the ng-model name of the values and labels to be generated automatically so in the ng-model i want to put something like this ng-model=val[$index] that iterates

so the result should be 

   $scope.contents =  [
        {label: "1st Label", value: "1st Value"},
        {label: "2nd Label", value: "2nd Value"},
        {label: "3rd Label", value: "3rd Value"}
    ] ;

Any help will be appreciated

share|improve this question
up vote 4 down vote accepted

Given this HTML:

  <body ng-controller="MyController">
    <label ng-repeat-start="label in labels">Label {{label}}</label>
    <input ng-model='values[$index]' type='text' value='' />
    <br ng-repeat-end>

    <button ng-click="saveEverything()">Save</button>
  </body>

And assuming you have a variable named myApp that has your main application, you'd make a controller like this:

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

myApp.controller('MyController', function($scope, $log) {
  $scope.labels = ['one', 'two', 'three'];
  $scope.values = new Array($scope.labels.length);

  $scope.saveEverything = function() {
    $scope.contents = [];
    for (i = 0; i < $scope.labels.length; i++) {
      $scope.contents.push({
        label: $scope.labels[i],
        value: $scope.values[i]
      });
    }
    $log.info('Saved to array[0]: ' + $scope.contents[0].value);
    $log.info('Saved to array[1]: ' + $scope.contents[1].value);
    $log.info('Saved to array[2]: ' + $scope.contents[2].value);
  }
});

Demo: http://plnkr.co/edit/JCCa1f?p=preview (Use your browser's Javascript console to see the values placed in the array)

That will wipe the $scope.contents array each time you press Save and then place three objects in it, one for each of your inputs.

I'm not sure why you'd want to do this, though, so if this isn't what you are looking for, perhaps you could expand on your question a bit to make your problem and needs a bit more clear.

share|improve this answer
    
This is pretty much what i wanted, but i want the ng-model name of the values and labels to be generated automatically so in the ng-model i want to put something like this ng-model=val[$index] that iterates – ziz194 Jan 30 '15 at 14:01
    
Are you saying you want the actual form generated from some list or range? I just don't see where you are going with this (or where you are coming from). Are you trying to capture data from a form that has no Angular bindings or something? Perhaps a demo on Plnkr.co would help. – MichaelOryl Jan 30 '15 at 14:06
    
ok, to tell where i'm coming from will make things a little bit complicated but i'll try I'm coming from an ng-include which loads everytime a different external html code that contains everytime diffent inputs.so i can't know the exact number of the inputs. is that clear ? – ziz194 Jan 30 '15 at 14:10
    
OK, take a look at the updated plunk in the answer. It creates the form using ng-repeat from a list of labels and then puts the required objects with labels and values into an array. I think that is what you asked for. – MichaelOryl Jan 30 '15 at 14:22
    
Yes thanks, that helps a lot – ziz194 Jan 30 '15 at 14:45
up vote 4 down vote

Initialize the contents variable with initial values:

$scope.contents =  [
    {name: "Label 1", value: ""},
    {name: "Label 2", value: ""},
    {name: "Label 3", value: ""}
 ] ;

Generate the input fields with a form such as:

<div ng-repeat="content in contents">
    <label>{{content.name}}</label>
    <input type='text' value='{{content.value}}' ng-model="content.value"/>
</div>

At the end you don't need the saveEverything because the content.values' will be bound with the $scope.contents variable therefore when the value is changed on an input field than the value on the contents variable will be up to date.

share|improve this answer
    
Yes, this is true if his list comes in this form, or if he maps the input array/list to this form (easy enough to do). This is nice and concise code. I gave him the button because he asked for a button that did the save. You don't always want live updates - sometimes you want to be able to cancel the updates. – MichaelOryl Jan 30 '15 at 14:55
1  
In that case I would bind the form (input elements) with a secondary contents array which on click would be saved on the primary contents array instead of binding keys + values separately, keeping track of index and than storing them on the final array. – Bardh Lohaj Jan 30 '15 at 15:01

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.