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

我在rows数组上使用ng-repeat来添加我需要的输入字段数量。例如，如果用户需要更多字段，我有扩展数组的函数。

然后我有一个清空输入的功能和一个填充它们的功能，它可以像预期的那样工作。但是，如果您自己在输入字段中键入内容，则这两个函数都不会对该输入起作用。

我的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>

我对Angular很新，所以我可能会遗漏一些东西。希望有人可以帮助我。

还做了一个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;  
        }
    }

AngularJS - 无法清空输入字段

2 个答案: