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

我尝试过的事情:我尝试了Google搜寻,但是没有运气。我试着更换$scope.inBox$scope.inbox[1]$scope.inbox[2]没运气。

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

更新


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

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

从技术上讲,我已经解决了这个问题,但是我使用jQuery做到了。如果有人想将上述解决方案转换为我将如何使用纯AngularJS获得该解决方案,请随时这样做,以便我可以使用该解决方案并在回答问题时给予您荣誉。

杀手

我不明白为什么你需要通过jQuery添加输入字段,这样做才使AngularJS生命周期...

在AngularJS中,视图模型的投影,因此,如果要添加更多字段,则需要在$ scope的fields属性中添加(在我的示例中)新对象。

顺便说一句,如果你想要或需要外界从AngularJS生命周期,角度提供了许多方法进行操作,你要做到这一点,例如,如果jQuery的存在,角度认识它,并用类似的方法装饰它.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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在具有不同ID的多个Select元素上使用相同的JavaScript函数

如何在多个元素上使用相同的代码切换显示/隐藏文本

jQuery在多个元素上使用相同的事件

如何在多个对象数组上使用ng-repeat?

如何在多个元素上但不同时使用toggleClass

如何在单击时在具有相同类名的多个元素上切换类

如何在具有相同类的多个 HTML div 上使用相同的 javascript 函数

我可以在 Django 的多个模型上使用相同的 @property 吗?

如何在具有相同类的多个按钮的单击事件上使用Javascript添加多个相同的ID

如何在scss中简单地设置样式,以便多个元素将使用相同的样式

如何在Tensorflow中使用多个模型

如何在AngularJS中的单个元素中使用ng样式的多个对象

对多个模型使用相同的范围

如何在多个数组中操作相同的元素

如何在ng-repeat创建的模型上监视变化?

如何在Windows 10上使用git更改相同格式的多个文件名?

如何在Netlify上使用相同的自定义域托管多个Github存储库?

如何在多个div上使用相同的jQuery函数而无需重复代码

如何在Keras模型子类API中使用多个模型

如何在视图模型上使用DelegateCommand?

如何在ng-repeat中分离多个元素?

Azure ML:如何在多个实例上训练模型

如何在多个Django模型上为Sum()应用注释?

如何在Django模型字段上存储多个值

如何在与 <a> 元素相同的行上显示 ::after 内容?

如何在成对元素上应用相同的函数

如何在NativeScript上包含相同字体的多个粗细?

如何在Azure的多个节点上运行相同的角色?

如何在相同距离上放置多个视图