Question

在我的控制器中，我有一个简单的数组和一个函数：

$scope.newGuarantor = '';
$scope.guarantors = [
    {guarantor: 'Peter Parker'},
    {guarantor: 'Bruce Wayne'}
];

$scope.addGuarantor = function(){
    $scope.guarantors.push({
        guarantor: $scope.newGuarantor
    });
    $scope.newGuarantor = '';
};

在视图中，我有一个简单的列表和表单：

<tr ng-repeat="pg in guarantors">
    <td>{{pg.guarantor}}</td>
</tr>
<tr>
    <td>
       <form ng-submit="addGuarantor()">
          <input type="text" ng-model="newGuarantor"/>
          <button type="submit">
               <span class="glyphicon glyphicon-plus"></span>
          </button>
       </form>
    </td>
 </tr>

根据我刚刚读到的内容，我应该可以在输入中键入一个值并单击按钮，输入的值应该添加到列出的数组中并清除表单。

相反，我将一个空行插入列表中，值仍保留在输入中。

谁能看到我错过的东西？

Answer 1

不确定为什么这有效但我将控制器更改为此功能

$scope.newGuarantor = {};
$scope.addGuarantor = function() {
    $scope.guarantors.push($scope.newGuarantor);
        $scope.newGuarantor = {};
    };

视图更改为：

<tr ng-repeat="pg in guarantors">
                    <td>{{pg.guarantor}}</td>
                </tr>
                <tr>
                    <td>
                        <form ng-submit="addGuarantor()">
                            <input type="text" ng-model="newGuarantor.guarantor"/>
                            <button type="submit">                         <span class="glyphicon glyphicon-plus"></span>
                            </button>
                        </form>
                    </td>
                </tr>

Answer 2

按下guarantor: $scope.newGuarantor后，您重置了$scope.newGuarantor。因此，由于$scope.newGuarantor的重置，推送的值将被重置。

如果您需要在不影响$scope.newGuarantor重置的情况下推送新对象，则可以使用angular.copy()它将创建variable的新副本，并且该副本不受原始价值。这意味着如果您更改原始值，则复制值不会更改。所以原始变量和复制变量之间没有关系。

$scope.addGuarantor = function(){
var objVal = angular.copy($scope.newGuarantor);
$scope.guarantors.push({
    guarantor: objVal
});
$scope.newGuarantor = '';

};

表单不添加到数组和清除

2 个答案: