Mix статический текст и переменная осциллографа внутри директивы

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 элемента, вы публикуете экземпляр формы в области контроллера ,

Таким образом, у вас будет имущество testForm, с которым вы можете получить доступ с помощью $scope.testForm. (Documentation)

Строго говоря, вам не нужно передавать форму функции, которую вы вызываете при отправке, поскольку она доступна из области действия.

Однако, если вы хотите, чтобы носить его, я полагаю, что вы отделить код от разметки - определить свойство области действия в контроллере, который будет содержать имя формы, как так:

$scope.myForm = 'testForm1'; 

Вы можете использовать это в разметке как:

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

Вы можете легко создать массив имен форм и использовать их в разметке (путем индексации их) без необходимости делать конкатенации и захламления разметки.