How to create an Array with AngularJS’s ng-model

by

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('<div><input type="text" ng-model="telephone[' + $scope.inputCounter + ']"></div>');
// Compile the HTML and assign to scope
var compile = $compile(input)($scope);

Have a look on JSFiddle

More Related Contents:

  1. Why are Callbacks from Promise `.then` Methods an Anti-Pattern
  2. How to display length of filtered ng-repeat data
  3. Clicking a button within a form causes page refresh
  4. How to dynamically change header based on AngularJS partial view?
  5. Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers
  6. What’s the recommended way to extend AngularJS controllers?
  7. Losing scope when using ng-include
  8. SyntaxError: Unexpected token o in JSON at position 1
  9. angularjs: allows only numbers to be typed into a text box
  10. Using Jquery Datatable with AngularJs
  11. How to implement history.back() in angular.js
  12. How to debug angular protractor tests in WebStorm
  13. What’s the difference/incompatibility between ng-model and ng-value?
  14. Angular JS custom delimiter
  15. Where to put model data and behaviour? [tl; dr; Use Services]
  16. Pass variables to AngularJS controller, best practice?
  17. Using Inline Templates in AngularJS
  18. How can I listen for a click-and-hold in AngularJS?
  19. Pass Angular scope variable to Javascript
  20. Extending AngularJs Directive
  21. Angular UI-Router more Optional Parameters in one State
  22. How can I use an AngularJS filter to format a number to have leading zeros?
  23. How to achieve that “ui-sref” be conditionally executed?
  24. Ionic Framework: $scope is undefined in simple alert
  25. WebSocket connection failed: Error during WebSocket handshake: Unexpected response code: 400
  26. Two way binding not working in directive with transcluded scope
  27. angularjs form reset error
  28. Angular – extending $resource subobject with custom methods
  29. Angular JS – Make service globally accessible from controllers and view
  30. I don’t understand the use of $inject in controllers

Leave a Comment