Как использовать одну и ту же ng-модель на нескольких элементах

Совершенно новый для 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]. Не повезло.

Как лучше всего получить все данные из входных блоков?

обновить

Чтобы получить нужное мне решение, я поместил jQuery внутри моей функции AngularJS. Моя новая функция AngularJS выглядит следующим образом: 

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

Технически, Я решил эту проблему, но сделал это с помощью jQuery. Если кто-то хочет перевести вышеприведенное решение в то, как я буду получать его с помощью pure AngularJS, пожалуйста, не стесняйтесь делать это, чтобы я мог использовать это решение и дать вам кредит на ответы на вопросы.

1 3
javascript angularjs html input angular-ngmodel

1 ответ:

Я не понимаю, зачем вам нужно добавлять поля ввода через jQuery, делая это, вы выходите из жизненного цикла AngularJS...

В AngularJS представление является проекцией модели , поэтому, если вы хотите добавить больше полей, вам нужно добавить (в моем примере) новый объект в свойство fields $scope.

Кстати, если вы хотите или должны работать вне жизненного цикла AngularJS, Angular предлагает вам много способов сделать это, например, если jQuery существует, angular распознает его и украшает такими методами, как .scope () (etc.), которые дают вам возможность получить доступ к модели с точки зрения. Примечание: поскольку вы находитесь вне среды AngularJS, вам нужно вручную вызвать [view-model sync process][1] (это причина, по которой я использовал scope.$применять).

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>
1