我有一个页面,在用户单击按钮后显示输入字段。如果用户多次单击同一按钮,应用程序将多次生成相同的输入字段。同样,有一个按钮可以删除最后添加的输入字段。
在用户生成并填写所需数量的输入字段后,我希望用户能够单击一个按钮,该按钮的操作将是从输入字段收集所有信息,并执行控制台。 log() 所有这些信息。我将如何在 Angular.js 中执行此操作?
这是我当前执行添加/删除输入字段部分的方式,以及我尝试从 View 收集数据的方式。
<div ng-app="" ng-controller="myController">
<button ng-click="add()">Click Me to Add!</button>
<button ng-click="rem()">Click Me to Remove!</button>
<div ng-repeat="x in obj">
<label>Input 1</label><input type="text" ng-model="thing">
</div>
<button ng-click="display()">display</button>
</div>
<script>
function myController($scope){
$scope.obj = [];
$scope.count = 0;
$scope.add = function(){
$scope.count = $scope.count + 1;
$scope.obj.push({lett: $scope.count});
};
$scope.rem = function(){
$scope.count = $scope.count - 1;
$scope.obj.pop();
};
$scope.display = function(){
console.log($scope.thing);
};
}
</script>
我所做的部分是我尝试将 View 中的数据绑定(bind)到应用程序。 $scope.display
是应该执行显示的函数。
预先感谢您的回复!
最佳答案
我重写了您的一些代码以使其正常工作:
<div ng-app="" ng-controller="myController">
<button ng-click="add()">Click Me to Add!</button>
<button ng-click="rem()">Click Me to Remove!</button>
<div ng-repeat="input in inputs track by $index">
<label>Input {{ $index }}</label>
<input type="text" ng-model="input.value" />
</div>
<button ng-click="display()">display</button>
</div>
<script>
function myController($scope){
$scope.inputs = [];
$scope.add = function(){
$scope.inputs.push({'value':''});
};
$scope.rem = function(){
$scope.inputs.pop();
};
$scope.display = function(){
console.log($scope.inputs);
};
}
</script>
你可以在这里看到 fiddle : http://jsfiddle.net/K38GC/
要按照您想要的方式显示,您可以编辑 $scope.display 函数以适合您想要的任何内容。如果您有任何疑问,请告诉我。
关于javascript - 如何在 Angular 中使用相同的 ng-model 从多个输入字段中检索文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24728885/