How to create Dynamic ng-model in Angular

Question

How can I create dynamic ng-models in Angular? I tried but I think I'm having a hard time getting it to run. All I get is undefined. Here's my code.

<input type="text" class="form-control input-sm" ng model="teller[value.teller_id]" value="<% value.mac_address %>">

I am planning to have a ng-model that has the same name but only changes by number. I have an object that holds the number from 1-4. which is value.teller_id. I want to append it to the ng-model as teller1,teller2,teller3 (teller[value.teller_id] etc.. It is looped by ng-repeat which I don't have any problem but rather creating the dynamic ng-model and changing the number will yield undefine.

 ng model="teller[value.teller_id]" <---- doesn't work

I want to achive teller1, teller2 etc..

Thanks!

why you don't want to use `ng-repeat`? it does the same thing — Maxim Shoustin, Sep 11 '15 at 06:48
The data I getting from an object is not actually 1,2,3,4 they change.. And I need to refer it from the object I am getting since it is also the primary key. — drake24, Sep 11 '15 at 06:54

score 4 · Accepted Answer · answered Sep 11 '15 at 07:25

Yes. We can generate ng-model name dynamically.

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

app.controller('MainCtrl', function($scope) {
  $scope.teller = {};
  $scope.name = [{
    "id":1
  },{
    "id":2
  }]
});

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div ng-repeat="x in name">
      <input type="text" ng-model="teller[x.id]" />
    </div>
    <pre>{{teller | json}}</pre>
  </body>

</html>

Hope it works for your case :)

Outstanding! you made it even simpler to understand @Thinker — drake24, Sep 11 '15 at 08:16

How to create Dynamic ng-model in Angular

1 Answers1

Linked