2015-11-19 44 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看看编辑的答案。希望能帮助到你! –