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

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]. Не повезло.

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

UPDATE

---

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

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

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

Answer 1

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

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

Кстати, если вам нужно или нужно работать снаружи от жизненного цикла AngularJS, Angular предлагает вам много способов сделать это, например, если jQuery существует, угловое распознает его и украшает его такими методами, как .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>