How to pass values of input elements of the html form created dynamically using ng-repeat to the ng-controller

Question

I designed a form like below.

<form id="123">
    <div ng-repeat="x in data" class="[ form-group form-inline ]">
    <input class="form-control input-md" type="checkbox" id="{{x.name}}" autocomplete="off" />
         <div class="[ btn-group ]">
               <label for="{{x.name}}" class="[ btn btn-success ]">
                  <span class="[ glyphicon glyphicon-ok ]"></span>
                  <span> </span>
               </label>
               <label for="{{x.name}}" class="[ btn btn-default active ]">
                  {{x.name}}
               </label>
        </div>
    <input class="form-control input-md" type="text" id="x.period" autocomplete="off" />
    <input class="form-control input-md" type="text" id="x.value" autocomplete="off" />
    </div>
    <button type="button" class="btn btn-info" style="float: right" ng-click="ctrl.addInfo()">Add</button>
</form>

Where ctrl is controller reference in html page defined in the same html page. I am unable to understand now how to pass each input value to the addInfo method as the no of input tags will be dynamic depending on the length of the 'data'. When i am trying to use ng-model={{x.name}} in the input field i am getting "Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{x.name}}] starting at [{x.name}}]."

Remove the {{}} when using ng-model. This ng-model={{x.name}} should be ng-model="x.name" — Marcus Höglund
– Marcus Höglund, Commented Feb 27, 2017 at 6:40
When i am using ng-model="x.name" the expression between <label>{{x.name}}</label> is getting evaluated and the label is changing to true or false based on user click. Hence, i wrote ng-model="name" and in the controller function when i am trying to refer to it as $scope.name i am getting name undefined error. Another doubt i have is since all input elements are ng-repeat how can i refer each of them separately in the controller function so that i can submit the form. this.addSensorInfo=function(){console.log('name ' + $scope.name );} — Satya Narayana
– Satya Narayana, Commented Feb 27, 2017 at 10:03

Arvind Mishra · Accepted Answer · 2018-03-14 10:04:36Z

1

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

app.controller('AnimalController', ['$http', '$scope',function($http, $scope){
    var type = this;
    type.cows = [ ];
    $http.get('animals.json').success(function(data){
        type.cows = data;
    });

app.controller("PanelController", function() {
    this.tab = 1;
    this.selectTab = function(setTab) {
        this.tab = setTab;
    };
    this.isSelected = function(checkTab) {
        return this.tab === checkTab;   
    }
});

JSON

[
   {
        "name": "Angus",
        "country": "UK"
   },
   {
        "name": "Hereford",
        "country": "Canada"
   },
   {
        "name": "Dwarf Lulu",
        "country": "Nepal"
   },
   {
        "name": "Ongole",
        "country": "India"
   }
]

<html ng-app="animalApp">
<section ng-controller="AnimalController as animalCtrl">
<ul ng-controller="PanelController as panel">
  <li ng-class="{ active: panel.isSelected(1)}" ng-show="panel.isSelected(1)">
    <ul>
      <li ng-repeat="cow in animalCtrl.cows">
        <h2>
          <a href="" data-ng-bind="cow.name" ng-click="panel.selectTab(2)"></a>
        </h2>
      </li>
    </ul>
  </li>
  <li ng-class="{ active: panel.isSelected(2)}" ng-show="panel.isSelected(2)">
    <p>This {{animalCtrl.cow.name}} lives in {{animalCtrl.cow.country}}</p>
    <a href="" ng-click="panel.selectTab(1)">Back to all cows</a>
  </li>
</ul> 
</section>
</html>

answered Mar 14, 2018 at 10:04

Arvind Mishra

211 silver badge13 bronze badges

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

1 Comment

Thomas Flinkow Over a year ago

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value.

Collectives™ on Stack Overflow

How to pass values of input elements of the html form created dynamically using ng-repeat to the ng-controller

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related