如何在多个元素上使用相同的 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>

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

How to use the same ng-model on multiple elements

html

javascript

input

angularjs

angular-ngmodel