【问题标题】:Access angularj form object via ng-click without passing model name通过 ng-click 访问 angularj 表单对象而不传递模型名称
【发布时间】:2015-11-19 15:14:17
【问题描述】:

在我的应用中,我有多个名称不同的表单。

我需要访问从 ng-click 事件调用的函数中的角形对象

例子:

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

由于某些原因,每个 ng-click 属性在任何时候都应该看起来相同,所以我不能只写 <a ng-click="model.func(form.name)"> 有没有办法在不将表单模型传递给函数的情况下做到这一点?可能通过事件访问表单或将$this.form 之类的内容传递给函数。

请注意:例如,我在实际应用中有一个表单 - 许多表单具有不同的名称

【问题讨论】:

  • 您不需要将表单传递给控制器​​,它在与控制器关联的 $scope 上可用。由于您使用的是controllerAs 语法,并且您已经使用控制器名称(mv.form 中的“mv”)命名了表单,因此您只能使用 mv.form 访问控制器中的表单......然后执行无需将其传递给您的 reset() 函数。
  • 是的,我知道。但我有很多表格,一个功能适用于所有表格。
  • 您只是想通过重置功能重置所有表单元素吗?还是您想重置单个表单元素,为其提供该字段独有的重置功能?

标签: angularjs


【解决方案1】:

我已经分叉了你的 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-原始类)。这种方法也会 传播到此表单中包含的所有控件。

当我们需要时,将表单设置回原始状态通常很有用 在保存或重置表单后“重新使用”表单。

【讨论】:

  • 我知道,但在实际应用中我有不同名称的不同表单,所以我不能只在函数中硬编码表单名称
  • 如果是这种情况,并且您希望使其尽可能动态,则指令最适合此功能。
  • @EvgeniiMalikov 看看编辑后的答案。希望对您有所帮助!
  • @EvgeniiMalikov 是的,指令是正确的方法。您的指令可能需要 Angular FormController,然后表单名称是什么并不重要,b/c 表单控制器被传递到指令中。
  • @EvgeniiMalikov 解释在this answer
猜你喜欢
  • 1970-01-01
  • 2016-12-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-04-14
  • 2020-11-18
  • 1970-01-01
相关资源
最近更新 更多