AngularJS：使用控制器作爲目標表單作爲對象的語法

注意：我在此處查看了解決方案的SO，但沒有人在對象中存在額外的函數問題。AngularJS：使用控制器作爲目標表單作爲對象的語法

我在我的角度JS應用的一種形式：

<div ng-app="plunker"> 
    <div ng-controller="PMTController as pmt"> 
    <form name="myForm"> 
    <div class="form-group"> 
    <input type="text" class="form-control" /> 
    </div> 
    <button class="btn btn-primary" ng-click="pmt.search.resetSearchForm()">Reset</button> 
    </form> 
</div> 
</div>

另外，我有一個對象控制器：

app.controller('PMTController', function($log) { 
    var _this = this; 

    _this.search = { 
    resetSearchForm: function() { 
    $log.debug('test'); 
    // how to target the form? 
    } 
}; 
})

我NG單擊作品，作爲log.debug作品。但沒有任何調整的目標表單，以便我可以重置整個事情（清空所有的領域）的作品。

我可以做$window.myForm.reset();但我怎麼能從角度做到這一點？

請注意我的主要問題/問題是如何正確從在search對象resetSearchForm函數內部目標的形式。

注意我試圖更改表格名稱爲pmt.myForm或pmt.search.myForm無濟於事。

我試過$setPristine和$setUntouched()但他們似乎沒有清除字段。

我知道我可以分配一個模型並將其分配給所有的窗體控件，但是這是一個原型，所以我寧願做一個簡單的重置。

我做了筆：https://codepen.io/smlombardi/pen/YWOPPq?editors=1011#0

來源

2016-08-01 Steve

您輸入ISN不以任何方式限制角度（沒有'ng-model'）並且沒有'id'，所以它不可能爲angul ar維護它的數據。 – Claies

我會嘗試它，但注意我似乎無法從該函數內正確定位窗體本身。我編輯了這個問題來澄清。 – Steve

，因爲創建用於表示表單的對象是一個角度特殊的對象，只包含它綁定的輸入。角沒有辦法改變它沒有綁定的表單字段的值。 – Claies

這是我對你的codepen，希望能解決這個問題：

https://codepen.io/watsoncn/pen/YWOXqZ?editors=1011

說明：

角的文檔提供的一個例子「表格重置」按鈕，但您可以在提交後應用相同的邏輯重置：

Documentation:https://docs.angularjs.org/guide/forms

與plunker：

Live Example:https://plnkr.co/edit/?p=preview

的例子顯示使用角度的copy方法的創建無論你把它作爲一個參數的深層副本，並將其分配到NG放在特定輸入字段上的模型。在這種情況下，他們只是傳遞一個空的主對象。

您需要確保將ng-model屬性添加到您的輸入中，然後創建一個重置功能，可以在提交後運行。另一個常見的選擇是在提交功能中簡單地將每個輸入的ng-model設置爲空字符串，例如$scope.inputModel = ""

這是你所期望的嗎？我可能誤解了這個問題。如果仍然存在混淆，我會很高興再次採取措施。

來源

2016-08-01 17:33:10

他使用'controller-as-syntax' ..而不是'$ scope'。 – developer033

嗯...除非controllerAs設置在一個配置中，我相信$ scope將需要view2controller數據流，正確嗎？我將添加一個更新的CodePen –

，這只是驗證我的意見，即綁定對於角度來說是影響表單所必需的。然而，你肯定**不**需要'$範圍'在這裏.... – Claies

要獲得在您的控制器的形式，你只需要說出您的形式是這樣的：

<form name="pmt.myForm">

下面是一個完整演示：

(function() { 
 
    "use strict"; 
 

 
    angular 
 
    .module('plunker', []) 
 
    .controller('PMTController', PMTController); 
 

 
    PMTController.$inject = ['$log']; 
 

 
    function PMTController($log) { 
 
    var _this = this; 
 
    _this.model = {}; 
 
    
 
    _this.search = { 
 
     resetSearchForm: function() { 
 
     console.log(_this.myForm); // -> Form reference 
 
     _this.model = {}; 
 
     } 
 
    }; 
 
    } 
 
})();

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
 
</head> 
 

 
<body ng-controller="PMTController as pmt"> 
 
    <div class="col-md-12"> 
 
    <form name="pmt.myForm"> 
 
     <div class="form-group"> 
 
     <input type="text" ng-model="pmt.model.example" class="form-control" /> 
 
     <input type="text" ng-model="pmt.model.example2" class="form-control" /> 
 
     <input type="text" ng-model="pmt.model.example3" class="form-control" /> 
 
     </div> 
 
     <button class="btn btn-primary" ng-click="pmt.search.resetSearchForm()">Reset</button> 
 
    </form> 
 
    <hr> All fields: 
 
    <pre ng-bind="pmt.model | json"></pre> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-08-01 19:44:43 developer033

AngularJS：使用控制器作爲目標表單作爲對象的語法

回答

相關問題