Question

我创建了一个名为

的简单表单

<form novalidate ng-controller="TestController" role="form" name="testForm">
    <input type="number" min="10" name="textForm" value="4">
    <input type="submit" ng-click="validate(testForm)">
</form>

然后我创建了一个控制器：

angular.module("testModule", []).controller("TestController", function($scope){     
  $scope.validate = function(form){
      alert("inside the function validate()");
  }
});

这可以正常工作（因为屏幕上会显示警告），因为您可以看到here。

现在我已在范围$scope.testNumber = 5;中添加了一个变量，并将此版本附加到表单的名称name="testForm{{testNumber}}">，并在表单<input type="submit" ng-click="validate(testForm{{testNumber}})">的输入提交上执行相同的操作。这不起作用，因为我看不到任何警报，因为你可以看到here。语法不正确，但如何实现我想做的事情呢？

Answer 1

由于ng-click是一个带参数的函数，因此需要连接变量。所以testForm + testnumber应该会给你想要的结果。

控制器

angular.module("testModule", []).controller("TestController", function($scope){
  $scope.testNumber = 5;
  $scope.validate = function(form){
      alert("inside the function validate()" + form);
  }
});

HTML

<form novalidate ng-controller="TestController" role="form" name="testForm{{testNumber}}">
    <input type="number" min="10" name="textForm" value="4">
    <input type="submit" ng-click="validate(testForm + testNumber)"> 
  </form>

plunker to demo更改

Answer 2

当您使用form元素的name属性时，您将表单实例发布到控制器范围中。

因此，您将拥有一个可以testForm访问的媒体资源$scope.testForm。（Documentation）

严格地说，您不必将表单传递给您提交时调用的函数，因为它可以从作用域访问。

但是，如果您确实想要执行它，我建议您将代码与标记分开 - 在控制器中定义一个范围属性，该属性将保存表单的名称，如下所示：

$scope.myForm = 'testForm1';

然后，您可以在标记中将其用作：

<form name="{{myForm}}">
    ...
    <input type="submit" data-ng-click="validate(myForm)"/>
</form>

您可以轻松创建一个表单名称数组，并在标记中使用它们（通过索引它们），而不必进行字符串连接并使您的标记混乱。

在指令中混合静态文本和范围变量

2 个答案: