Question

目前我有这个jQuery

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

我尝试了以下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>

我正在尝试使用ng-click将一个小过程更改为使用Angular工作，我似乎无法让它工作，有人可以帮助我吗？

注意：输入是动态添加的，所以我永远不知道会有多少输入，我试图在Angular而不是jQuery中执行此操作

Answer 1

不要基于jQuery思考，总是考虑架构。在jQuery中，您可以设计一个页面，然后将其设置为动态。这意味着您可以使用jQuery直接修改DOM。但是在角度js中创建自定义指令以修改DOM。

为了动态添加文本字段，我按如下方式创建了一个控制器。

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

有一个名为addField（）的函数。在div或按钮等元素的click事件上调用此函数。检查以下HTML代码。

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

您必须阅读这篇文章：How do i think in Angular if i have a jQuery background 。查看以下链接以了解有关添加表单字段的信息。

jQuery到Angular获取输入字段值

1 个答案: