How to create an Array with AngularJS s ng-model

Question

I m trying to create an array holding telephones  i have this code   lt input type  text  ng-model  telephone 0     gt   lt input type  text  ng-model  telephone 1     gt    But i can t access  scope telephone

User · Accepted Answer

First thing is first  You need to define  scope telephone as an array in your controller before you can start using it in your view    scope telephone         To address the issue of ng-model not being recognised when you append a new input - for that to work you have to use the  compile Angular service    From the Angular js API reference on  compile      Compiles an HTML string or DOM into a template and produces a template function  which can then be used to link scope and the template together       I m using Angular syntax  Using jQuery will have the same effect    Create input element var input   angular element   lt div gt  lt input type  text  ng-model  telephone      scope inputCounter       gt  lt  div gt        Compile the HTML and assign to scope var compile    compile input   scope     Have a look on JSFiddle

User · Answer

One way is to convert your array to an object and use it in scope  simulation of an array   This way has the benefit of maintaining the template    scope telephone       for  var i   0  l    scope phones length  i  lt  l  i         scope telephone i toString       scope phone i          lt input type  text  ng-model  telephone 0 toString       gt   lt input type  text  ng-model  telephone 1 toString       gt      and on save  change it back    scope phones       for  var i in  scope telephone       scope phones parseInt i      scope telephone i

User · Answer

How to create an array of inputs with ng-model  Use the ng-repeat directive    lt ol gt     lt li ng-repeat  n in      range count  gt       lt input name  telephone-   index               ng-model  telephones  index  value   gt     lt  li gt   lt  ol gt    The DEMO   x000D   x000D  angular module  app      x000D   controller  ctrl  function  scope   x000D     scope count   3  x000D     scope telephones       x000D     x000D   filter  range  function     x000D    return  x n    gt  Array from  length n   x index   gt  index    x000D     x000D   lt script src    unpkg com angular angular js  gt  lt  script gt  x000D   lt body ng-app  app  ng-controller  ctrl  gt  x000D       lt button gt  x000D        Array length x000D         lt input type  number  ng-model  count   x000D               ng-change  telephones length count  gt  x000D       lt  button gt  x000D       lt ol gt  x000D         lt li ng-repeat  n in      range count  gt  x000D           lt input name  telephone-   index    x000D                 ng-model  telephones  index  value   gt  x000D         lt  li gt  x000D       lt  ol gt    x000D        telephones   x000D   lt  body gt  x000D   x000D   x000D

User · Answer

It works fine for me  http   jsfiddle net qwertynl htb9h   My javascript   var app   angular module  myApp       app controller  MyCtrl      scope   function  scope         scope telephone           lt  lt  remember to set this

User · Answer

You can do a variety of things  What I would do is this    Create an array on scope that will be your data structure for the phone numbers     scope telephone        scope numbers         Then in your html I would have this   lt input type  text  ng-model  telephone  gt   lt button ng-click  submitNumber    gt Submit lt  button gt    Then when your user clicks submit  run submitNumber    which pushes the new telephone number into the numbers array     scope submitNumber   function       scope numbers push  scope telephone

User · Answer

This should work   app   angular module  plunker        app controller  MainCtrl     scope  - gt     scope users     bob    sean    rocky    john      scope test   - gt      console log  scope users   HTML    lt input ng-repeat  user in users  ng-model  user  type  text   gt   lt input type  button  value  test  ng-click  test      gt    Example plunk here

[javascript] How to create an Array with AngularJS's ng-model

Examples related to javascript

Examples related to angularjs