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

Community · Accepted Answer · 2017-05-23 10:25:01Z

0

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.

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Jan 13, 2014 at 8:00

Sajith

2,8529 gold badges39 silver badges49 bronze badges

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

1 Comment

ngplayground Over a year ago

I see what you're saying there but I'm just trying to pull the data from the inputs if thats possible?

Collectives™ on Stack Overflow

jQuery to Angular getting input field values

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related