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

How to use the same ng-model on multiple elements

本文关键字：模型 ng 元素      更新时间：2023-09-26

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。运气不好。

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

更新

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

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

从技术上讲，我已经解决了这个问题，但我是用jQuery解决的。如果有人想把上面的解决方案转化为我如何用纯AngularJS获得它，请随时这样做，这样我就可以使用该解决方案，并感谢你回答了问题。

我不明白为什么你需要通过jQuery添加输入字段，这样你就得到了AngularJS的生命周期。。。

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

顺便说一句，如果你想或需要在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>

相关文章：