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 = " "; 
    } 
} 

Я использую нг-повтора на массив строк, чтобы добавить количество полей ввода мне нужно. Например, у меня есть функция, которая расширяет массив, если пользователю нужно больше полей.

Тогда у меня есть функция для опорожнения входов и одна для их заполнения, которая работает, как и предполагалось. Однако, если вы вводите что-то в поля ввода самостоятельно, то ни одна из функций не будет работать на этом входе.

Мой 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; 
     } 
    }