如何在Angular中使用相同的ng-model从多个输入字段中检索文本

How to retrieve text from several input fields with same ng-model in Angular

本文关键字：输入 ng-model 检索 字段 文本 Angular      更新时间：2023-09-26

我有一个页面，在用户单击按钮后显示一个输入字段。如果用户多次单击同一个按钮，应用程序将多次生成相同的输入字段。同样，有一个按钮可以删除最后添加的输入字段。

在用户生成并填写了尽可能多的输入字段之后，我希望用户能够单击一个按钮，该按钮的操作将从输入字段收集所有信息，并对所有这些信息执行console.log()。在Angular.js中我该怎么做呢?

这是我目前正在做的添加/删除输入字段的部分，以及我试图从视图收集数据的方式。

<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>

我做ng-model="thing"的部分是我试图将数据从视图绑定到应用程序。$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>

你可以在这里看到小提琴:http://jsfiddle.net/K38GC/

要获得您想要的显示方式，您可以编辑$scope。显示功能，以适应任何你喜欢。如果您有任何问题，请告诉我。

相关文章：