Angularjs 表单未添加到数组并清除

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

$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>

{{pg.saurer}}

根据我刚才读到的内容，我应该能够在输入中键入一个值，然后单击按钮，输入的值应该被添加到列出的数组中，并且表单被清除

相反，我得到的是一个空行被插入到列表中，而该值保留在输入中

---

有人能看到我漏掉了什么吗？

在你按下

担保人：$scope.newassurant

后，你将重置

$scope.newassurant

。因此，由于重置了

$scope.newAssurator

，推送的值将被重置

如果您需要在不影响重置

$scope.newAssurator

的情况下推送新对象，则可以使用

angular.copy（）

创建

变量的新副本，并且该副本不受原始值的影响。这意味着，如果更改原始值，则复制值不会更改。所以原始变量和复制变量之间没有关系

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

})
 不知道为什么会这样，但我把控制器改成了这样，它就工作了

$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>


{{pg.saurer}}
尝试创建一个plunker或fiddle来演示问题。我用代码创建了一个JSFIDLE，效果很好：太混乱了。。。代码在JSFIDLE中工作，但在我的页面上，我得到一个空行和一个完整的输入，控制台中没有错误。为了确保它不是一个愚蠢的类型，我复制并粘贴了从小提琴到我的尝试的代码。你使用的是什么版本的AngularJS？您的页面上还有其他标记吗？1.2.16以及页面上最明确的其他代码。。。完整控制器为346行，视图为371行。我只是摘录了相关的代码。。。同样，控制台中没有错误。我肯定错过了其他内容，因为解释很有道理，但这段代码为我生成了相同的结果——一个新的空白行，输入仍然填充。这不是正确的答案。OP的代码首先运行良好。此外，在JavaScript中，简单值（如字符串）总是通过副本传递，而不是通过引用传递。这就是为什么对字符串调用“copy”不会改变此代码的工作方式。