如何在多个元素上使用相同的 ng-model

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[1] 或$scope.inbox[2] 替换$scope.inBox。没有运气。

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

更新

---

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

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

从技术上讲，我已经解决了这个问题，但我是使用 jQuery 解决的。如果有人想将上述解决方案翻译成我将如何使用纯 AngularJS 获得该解决方案，请随时这样做，以便我可以使用该解决方案并感谢您回答问题。

Answer 1

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

在 AngularJS 中，view 是 model 的投影，因此，如果您想添加更多字段，则需要（在我的示例中）添加一个新对象$scope 的字段属性。

顺便说一句，如果你想或需要在 AngularJS 生命周期之外进行操作，Angular 为你提供了很多方法来做到这一点，例如，如果 jQuery 存在，Angular 会识别它并用 .scope() （等等）使您能够从视图访问模型。 注意：因为您在 AngularJS 环境之外，您需要手动触发 [view-model sync process][1]（这就是我使用 scope.$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>