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] 删除。
我来说两句