角型モデルng-repeatすべての入力をクリアする

機能clear()がこの下の例で機能しないのはなぜですか？角型モデルng-repeatすべての入力をクリアする

HTML：

<!DOCTYPE html> 
<html> 

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
</head> 

<body> 
    <div class="wrapper" ng-app="app" ng-controller="AppController"> 
    <div class="form-control" ng-repeat="n in [] | range:number"> 
     <input type="text" ng-model="newVar" /> 
     <span>{{newVar}}</span> 
    </div> 
    <!-- //form controll --> 
    <input type="range" ng-model="number" max="9" /> 
    <label>Repeat input fields {{number}} times</label> 
    <button ng-click="clear()">clear</button> 
    </div> 
</body> 

</html>

コントローラー：ここ

var app = angular.module('app', []); 

app.controller('AppController', function($scope) { 
    $scope.number = 5; 
    $scope.newVar = 0; 
    $scope.clear = function() { 
     $scope.newVar =''; 
    } 
});//AppController 

app.filter('range', function() { 
    return function (input, total) { 
    total = parseInt(total); 
    for (var i = 0; i < total; i++) { 
     input.push(i); 
    } 
    return input; 
    }; //filter range 
});

は私あなたがテキストボックスの値を更新すると、手動で、それは実際にnewVar Vを設定plnkr

出典

2016-09-20 andrzej

明確である何が（）を行うためのもの？ –

すべての入力値を消去することができます... – happyZZR1400

はい、clear（）は入力からすべての値を削除する必要があります – andrzej

ng-repeatは、すべての「繰り返し」の子スコープを作成するためplunkです。さらに、配列/オブジェクトを使用してすべての値を格納し、ビュー内のすべての異なる行に1つの変数を使用することはできません。あなたはng-repeat内部$indexを使用してこれを行うことができます。

<!DOCTYPE html> 
<html> 

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
</head> 

<body> 
    <div class="wrapper" ng-app="app" ng-controller="AppController"> 
    <div class="form-control" ng-repeat="n in [] | range:number"> 
     <input type="text" ng-model="$parent.newVar[$index]" /> 
     <span>{{newVar[$index]}}</span> 
    </div> 
    <!-- //form controll --> 
    <input type="range" ng-model="number" max="9" /> 
    <label>Repeat input fields {{number}} times</label> 
    <button ng-click="clear()">clear</button> 
    </div> 
</body> 

</html>

それは空の文字列にオブジェクト全体を設定しますので、この方法clear()は、すべての値をクリーンアップします。

私もこのようなものに明確な機能を変更する理由です：

$scope.clear = function() { 
     $scope.newVar = {}; 
}

出典

2016-09-20 09:07:34

ありがとう！ ng-model = "$ parent.newVar [$ index]"それは私が必要とするものです – andrzej

ですalue in childScope（ng-repeatディレクティブで作成）ので、newVarにバインドする代わりに、値を$parent.newVarでバインドしようとすると完全に動作します。

<!DOCTYPE html> 
<html> 

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
</head> 

<body> 
    <div class="wrapper" ng-app="app" ng-controller="AppController"> 
    <div class="form-control" ng-repeat="n in [] | range:number"> 
     <input type="text" ng-model="$parent.newVar" /> 
     <span>{{newVar}}</span> 
    </div> 
    <!-- //form controll --> 
    <input type="range" ng-model="number" max="9" /> 
    <label>Repeat input fields {{number}} times</label> 
    <button ng-click="clear()">clear</button> 
    </div> 
</body> 

</html>

hereあなたが$parentを使用して、コントローラのスコープにアクセスできるようにします

出典

2016-09-20 08:49:59

補助メモとして、すべてのテキストボックスの値を更新するように、スパンタグ。 –

clear（）は動作していますが、使用後にスコープが壊れています。すべての入力は同じデータを入力します – andrzej

@andrzejこれは私がコメントで言及したものです。 –

角型モデルng-repeatすべての入力をクリアする

答えて

関連する問題