如何使用AngularJS重置

Question

您好我有一個項目使用bootstrap ui？（AngularJS）。我想實現一個重置功能來重置所有的輸入欄和單選按鈕。我試圖在我的JS文件中添加一個新的控制器，但失敗了。以下是我的代碼。 HTML部分：

<div ng-controller="AlertDemoCtrl"> 

     <table class="table"> 

      {% verbatim %} 

      <tr> 
       <td class="input-group" ng-repeat="(k,v) in alerts"> 
        <span class="input-group-addon">Check {{ k }}</span> 
        <input type="text" class="form-control" placeholder="Add Check here">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        <b>functional check</b>&nbsp;&nbsp;&nbsp;<input type="radio" name="a1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        <b>CFM issue</b>&nbsp;&nbsp;&nbsp;<input type="radio" name="a1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        <b>Defect risk</b>&nbsp;&nbsp;&nbsp;<input type="radio" name="a1"> 

       </td></tr> 
      {% endverbatim %} 
      <tr><td><button type="button" class='btn btn-info' ng-click="addAlert()">+Add Check</button> 
       <button type="reset" ng-click="reset()" class="btn btn-danger">Reset</button> 
      </td></tr></table></div> 

和我的JS：

{{ ngapp }}.controller("AlertDemoCtrl", function ($scope, $http){ 

$scope.alerts = []; 

$scope.addAlert = function() { 
$scope.alerts.push({msg: 'Another alert!'}); 
}; 

$scope.closeAlert = function(index) { 
$scope.alerts.splice(index, 1); 
}; 
$scope.reset = function() { 
$scope.user = angular.copy($scope.master); 
}; 

$scope.reset(); 

}); 

有人建議我的方式來做到這一點..在此先感謝。

Answer 1

你可以開發你的模型多一點，包括每個警報的屬性列表：

$scope.addAlert = function() { 
    $scope.alerts.push({ 
     msg: 'Another alert!', 
     props: 0, 
     input: "" 
    }); 
    }; 

扳平視圖這些屬性：

 <input type="text" class="form-control" placeholder="Add Check here" ng-model="v.input"> 
     <br/> 
     <b>functional check</b>&nbsp;&nbsp;&nbsp; 
     <input type="radio" value="fc" ng-model="v.props"> 
     <br/> 
     <b>CFM issue</b>&nbsp;&nbsp;&nbsp; 
     <input type="radio" value="cfm" ng-model="v.props"> 
     <br/> 
     <b>Defect risk</b>&nbsp;&nbsp;&nbsp; 
     <input type="radio" value="dr" ng-model="v.props"> 

，然後遍歷每個警報的屬性重置期間：

$scope.reset = function() { 
    angular.forEach($scope.alerts, function(v) { 
     v.input = ""; 
     v.props = 0; 
    }); 
    }; 

請參考我創建的這個plunker爲您提供：

http://plnkr.co/edit/JINIgCOTfD2c5dklldQc?p=preview

更新：

隱藏元素使用NG隱藏屬性。我更新了plunkr