AngularJS - 無法清空輸入字段

Question

我在使用ng-repeat添加空白輸入字段後遇到了一些問題。

我的控制器看起來是這樣的：

var SimpleController = function ($scope) { 
    $scope.rows = [{id: 'row1' }, {id: 'row2'}, {id: 'row3'}, {id: 'row4'}]; 

    $scope.addText = function() { 
     $scope.modelRow = "text"; 
    } 
    $scope.removeText = function() { 
     $scope.modelRow = " "; 
    } 
} 

我使用的是行陣列上NG-重複添加輸入字段我所需要的量。例如，如果用戶需要更多的字段，我有擴展數組的函數。

然後我有一個函數來清空輸入和一個來填補他們，這就像預期的那樣工作。但是，如果您自己在輸入字段中輸入內容，那麼這兩個函數都不會在該輸入上起作用。

我的HTML：

<div ng-repeat="row in rows" > 
    <input ng-model="modelRow" type="text" name="text" /> 
</div> 

<button ng-click="addText()">Add text</button> 
<button ng-click="removeText()">Remove Text</button> 

我很新的角度，所以我可能失去了一些東西。希望有人能幫助我。

也做了一個jsfiddle來演示我的問題，它可以在這裏找到：jsfiddle（嘗試打字的東西，你會看到，功能不起作用）。

Answer 1

只是闡述了以前的答案。這是您可以擁有的控制器。

var SimpleController = function ($scope) { 
    $scope.rows = [{id: 'row1', value: ''}, {id: 'row2', value: ''}, {id: 'row3', value: ''}, {id: 'row4', value: ''}]; 

    $scope.addText = function() { 
     for (var i in $scope.rows) { 
      $scope.rows[i].value = "text"; 
     } 
    }; 
    $scope.removeText = function() { 
     for (var i in $scope.rows) { 
      $scope.rows[i].value = ""; 
     } 
    } 
}; 

每一行模型應該有一個屬性來存儲用戶輸入的文本。函數addText()和removeText()應該遍歷行模型並修改value屬性。

<div ng-repeat="row in rows"> 
    <input ng-model="row.value" type="text" name="text"/> 
</div> 

<button ng-click="addText()">Add text</button> 
<button ng-click="removeText()">Remove Text</button> 

Answer 2

HTML

<div ng-repeat="row in rows" > 
     <input ng-model="model.modelRow" type="text" name="text" /> 

    </div> 

<button ng-click="addText()">Add text</button> 
<button ng-click="removeText()">Remove Text</button> 

控制器

$scope.rows = [{id: 'row1' }, {id: 'row2'}, {id: 'row3'}, {id: 'row4'}]; 
    $scope.model={}; 
    $scope.model.modelRow=''; 
    $scope.addText = function() { 
     $scope.model.modelRow = "text"; 
    } 
    $scope.removeText = function() { 
     $scope.model.modelRow = " "; 
    } 

改變這樣的代碼將解決你的問題

編輯

在上面的代碼，如果你在一個文本字段中輸入的所有文本字段將充滿了同樣的內容，如果您使用單模式

它應該像

工作我的建議是改變ng-model="row.value"

HTML

<div ng-repeat="row in rows" > 
     <input ng-model="row.value" type="text" name="text" /> 
    </div> 

    <button ng-click="addText()">Add text</button> 
    <button ng-click="removeText()">Remove Text</button> 
    <!-- <pre>{{rows}}</pre> --> 

控制器

$scope.rows = [{id: 'row1' }, {id: 'row2'}, {id: 'row3'}, {id: 'row4'}]; 

    $scope.addText = function() { 
     for(var index in $scope.rows){ 
     $scope.rows[index].value="text"; 
     } 

    } 
    $scope.removeText = function() { 
     for(var index in $scope.rows){ 
     delete $scope.rows[index].value; 
     } 
    }