2015-11-19 42 views
0

在我的應用程序中,我有多個具有不同名稱的表單。通過ng-click訪問angularj表單對象而不通過模型名稱

我需要訪問我的功能,從所謂的角形式對象NG單擊事件

例子:

https://jsfiddle.net/EvgeniiMalikov/fpt5kcba/

對於一些原因,每一個NG單擊ATTR看起來應當是相同的所有時間,所以我不能只寫<a ng-click="model.func(form.name)"> 有沒有辦法做到這一點,而無需將表單模型傳遞給函數?可以通過事件訪問表單或傳遞類似$this.form的功能。

請注意:在例子中,我有一個形式,在真正的應用程序 - 使用不同的名稱

+0

您不需要將表單傳遞給控制器​​,它可以在與控制器關聯的$ scope上使用。由於您使用的是'controllerAs'語法,並且您已經使用控制器名稱(「mv.form」中的「mv」)命名了表單,所以您只能使用'mv.form'訪問控制器中的表單。 ..並且不需要將它傳遞給你的'reset()'函數。 –

+0

是的,我知道。但是我有許多形式和一種形式的功能。 –

+0

你只是試圖通過重置功能重置**所有**表單元素?或者你是否想要重置一個表單元素,爲其提供該字段特有的重置功能? – jusopi

回答

2

我已付出你的jsfiddle爲您展示如何做到這一點有多種形式:https://jsfiddle.net/fpt5kcba/2/

正如你分配表單的名稱,name="mv.form"您可以通過控制器中的相同方式訪問它。

angular.module('myApp', []).controller('myCtrl', function() { 
    var mv = this; 
    mv.reset = function() { 
     mv.text=''; 
     mv.form.$setPristine(); 
    } 
}); 

編輯:

如果你想要的是讓它動態,看看這個的jsfiddle:https://jsfiddle.net/fpt5kcba/5/

這是這樣的:

<div ng-app="myApp" ng-controller="myCtrl as mv"> 
      <div ng-repeat="form in mv.forms"> 
       {{form.id}} 
       <form name="mv.{{form.id}}"> 
        <input ng-model="form.text"><br> 
        <a href="#" ng-show="mv[form.id].$dirty" ng-click="mv.reset(form.id, $index)">reset</a> 
       </form> 
      </div> 
</div> 

控制器:

angular.module('myApp', []).controller('myCtrl', function ($scope) { 
    var mv = this; 

    mv.forms = [ 
    { 
     id: "form1", 
     text: "" 
    }, 
    { 
     id: "form2", 
     text: "" 
    }]; 

    mv.values = { 
     form1: "", 
     form2: "" 
    }; 

    mv.reset = function (formId, index) { 
     mv.text=''; 
     mv.forms[index].text = ""; 
     mv[formId].$setPristine(); 
    } 
}); 

總是要指望$ setPristine不用於清除字段。

將窗體設置爲其原始狀態。

可以調用此方法來刪除'ng-dirty'類並將 表單設置爲其原始狀態(ng-pristine類)。這種方法也將 傳播到這個表單中包含的所有控件。

當我們希望 在保存或重置表單後「重用」表單時,將表單設置回原始狀態通常很有用。

+0

我知道,但在真實應用程序中,我使用不同名稱的不同形式,因此我不能在函數中硬編碼表單名稱。 –

+0

如果是這種情況,並且您希望使其儘可能動態,則指令將最適合此功能。 – jusopi

+0

@EvgeniiMalikov看看編輯的答案。希望能幫助到你! –