jQuery to Angular getting input field values

Question

Currently I have this jQuery

    $('body').on('click','.plot', function(){
        var y = $('input[name="gps[]"]').map(function() {return this.value;}).get();
        console.log(y);
        console.log(y[0]);
    });

I've tried the following Angular

theApp.controller('MenuSideController', ['$scope', function($scope) {
    $scope.addnewmarker = function() {
        var newdiv = document.createElement('div');
        newdiv.innerHTML = "<input type='text' name='gps[]' placeholder='Enter Address or Lat/Lon'>";
        document.getElementById('marker').appendChild(newdiv);
        counter++;
    };
    $scope.plotmarkers = function() {
        var y = document.getElementsByName('gps[]').map(function() {
            return this.value; 
            }).get();
        }
        console.log(y);
    };
}]);

html

    <div id="marker">
        <input type="text" name="gps[]" id="gps">
        <input type="text" name="gps[]">
    </div>                          
<input type="button" value="Add another marker input" ng-click="addnewmarker();"></br>

<button class="plot btn" ng-click="plotmarkers()">Plot</button>

I'm trying to change a small process over to work in Angular using ng-click and I cannot seem to get this to work, could someone help me out?

Note: the inputs get added dynamically so I can never know how much inputs there will be and I'm trying to do this in Angular instead of jQuery

Answer 1

Don't think based on jQuery, always think in terms of architecture. In jQuery you design a page and then you make it dynamic. That means you can directly modify DOM using jQuery. But in angular js create your custom directives for modifying DOM.

For adding a text field dynamically, I created a controller as follows.

app.controller('MainCtrl', function($scope) {
  $scope.inputFields = [];
  $scope.count = 0;
  $scope.addField = function(){
    $scope.inputFields.push({name:"inputText"+$scope.count++});
  }
});

There is a function named addField(). Call this function on click event of an element like div or a button. Check the following html code.

<div ng-click="addField()">Click here to add</div>
<div ng-repeat="inputField in inputFields">
   <input type="text" name="inputField.name">
</div>

You must read this article: How do i think in Angular if i have a jQuery background . Check following links to get an idea about adding form fields.

1. Create Html Elements dynamically
2. Adding multiple input field
3. Rendering form html dynamically