Question

表格在开始时有1个输入字段用于地址。 Bellow有一个链接，当点击时添加另一个输入，依此类推。字段数量没有限制。

在Angular中有更优雅的方式在模型集合中添加新元素吗？我目前正在使用一个null元素数组，并在链接上单击我只是在该数组中推送另一个null，以便ng-repeat选择它。当我想提交表单时，我会遍历该数组并过滤掉非空的元素。
当输入字段被聚焦/模糊时，应该进行验证。我目前正在从控制器调用ng-blur事件中的函数，但是我无法将其传递给当前输入文本值。

HTML：

<div ng-app="TestApp">
    <div ng-controller="MainCtrl">
        <div ng-repeat="field in fields track by $index">
            <input type="text" placeholder="enter the address" ng-model="fields[$index]" ng-blur="validate()" />
        </div>
        <a href="#" ng-click="addField()">+ Add another input</a>
    <br/>
    <br/>
        <a href="#" ng-click="listAddresses()">List addresses</a>
    </div>
</div>

JS：

var app = angular.module("TestApp", []);
app.controller("MainCtrl", function($scope){

    $scope.fields = [null];
    $scope.addresses = [];

    $scope.addField = function(){
        $scope.fields.push(null);
    };

    $scope.listAddresses = function(){
        for(var i in $scope.fields){
            if($scope.fields[i] !== null){
                $scope.addresses[i] = $scope.fields[i];
            }
        }
        alert("Addresses: " + $scope.addresses);
    };

    $scope.validate = function(){
        console.log("Should validate current input");
    };

});

Answer 1

不使用两个数组，而是使用一个并存储对象：

$scope.items = 
[
  { address: '' }
];

现在可以更清楚输入的模型是什么，因为您不必使用$index。您也可以将该项目传递给validate函数：

<div ng-repeat="item in items">
  <input type="text" ng-model="item.address" ng-blur="validate(item)" placeholder="enter the address" />
</div>

添加项目：

$scope.addItem = function() {
  $scope.items.push({ address: '' });
};

演示： http://plnkr.co/edit/sPlPO2DfrgNHf5AasYlH?p=preview

使用Angular动态添加输入字段并对模糊执行验证

1 个答案: