Question

这里是AngularJS的新手。我有一个页面将有一个未定义的输入框，用户将输入跟踪号码。可能只有1，或者可能有10。

我需要从每个输入框中获取数据。我目前卡住了，因为我无法弄清楚如何从所有输入框中获取所有数据;我只能从第一个获取数据。

HTML 的

<input type="text" class="form-control" ng-model="inBox">
<!-- There are buttons and jQuery that will add another one of the 
     same exact input box above onto this page. There might be as many
     as 15 of these input boxes on the page, and I need the values typed
     into each one. -->
<input type="submit" ng-click="insert()">

AngularJS

var app = angular.module("myApp", []);
app.controller("mailroomController", function($scope, $http) {
    $scope.insert = function() {
        alert($scope.inBox);
    };
});

我尝试过的事情：我试着用谷歌搜索，没有运气。我尝试用$scope.inBox或$scope.inbox[1]替换$scope.inbox[2]。没有运气。

从输入框中获取每个数据的最佳方法是什么？

更新

为了获得我需要的解决方案，我在我的AngularJS函数中放置了jQuery。我的新AngularJS函数如下所示：

$scope.insert = function() {
    $('.scan-packages').each(function() {
        console.log(this.value);
    });
};

从技术上讲，我已经解决了这个问题但我使用jQuery这样做了。如果有人想将上述解决方案转化为我将如何使用纯AngularJS获得该解决方案，请随意这样做，以便我可以使用该解决方案并给予您回答问题的信誉。

Answer 1

我不明白为什么你需要通过jQuery添加输入字段，这样你就可以看出AngularJS的生命周期......

在AngularJS中，视图是模型的投影，因此，如果要添加更多字段，则需要将（在我的示例中）添加一个新对象$ scope的fields属性。

顺便说一下，如果你想要或者需要在AngularJS生命周期之外进行操作，Angular会为你提供许多方法，例如，如果jQuery存在，angular会识别它并用 .scope（）（等），使您能够从视图中访问模型。注意：因为你在AngularJS环境之外，你需要手动触发[view-model sync process][1]（这就是我使用范围的原因。$ apply）。

angular
  .module('test', [])
  .controller('TestCtrl', function($scope) {
    var vm = $scope;
  
    vm.fields = [
      {
        name: 'trackId1',
        value: '123xxbb110000'
      },
      {
        name: 'trackId2',
        value: '123xxbb110001'
      },
      {
        name: 'trackId3',
        value: '123xxbb110002'
      },
      {
        name: 'trackId4',
        value: '123xxbb110003'
      }
    ];
  
    vm.addField = function(event) {
      vm.fields.push({
        name: Date.now(),
        value: 'AngularJS'
      });
    };
  })
;

jQuery(document).ready(function($) {
  console.log('ready');
  $('#addFields').click(function() {
      var scope = $('[ng-controller="TestCtrl"]').scope();
      

      
      scope.$apply(function() {
        scope.fields.push({
          trackId: Date.now(),
          value: ''
        });
      });
  });
});

.debug { 
  width: 100%;
  background: lightseagreen;
  padding: 5px 15px;
  margin: .5em 0;
  line-height: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<article ng-app="test">
  <div ng-controller="TestCtrl">
    
    <input ng-repeat="field in fields track by $index" ng-model="field.value" name="{{ field.name }}"/>
    
      
  <div><button ng-click="addField($event)">Add Field Via AngularJS</button></div>  
  <div class="debug" ng-bind="fields | json"></div>
  </div>

</article>

<button id="addFields">Add Fields Via jQuery</button>

如何在多个元素上使用相同的ng模型

1 个答案: