1

開始時のフォームには、住所の入力フィールドが 1 つあります。以下に、クリックすると別の入力が追加されるリンクがあります。フィールド数に制限はありません。

  1. Angular のモデル コレクションに新しい要素を追加するよりエレガントな方法はありますか? 現在、null 要素の配列を使用しています。リンクをクリックすると、その配列に別の null をプッシュするだけなので、ng-repeat がそれを取得します。フォームを送信するときは、その配列を調べて、null でない要素を除外します。

  2. 入力フィールドがフォーカスアウト/ぼやけている場合は、検証を実行する必要があります。現在、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");
    };

});
4

1 に答える 1

2

2 つの配列を使用する代わりに、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

于 2014-05-08T14:33:02.073 に答える