ng-repeat 中的表单名称并将 ng-click 函数中的表单名称传递给 javascript

Posted

技术标签:

【中文标题】ng-repeat 中的表单名称并将 ng-click 函数中的表单名称传递给 javascript【英文标题】:form name in ng-repeat and pass form name in ng-click function to javascript 【发布时间】:2016-12-08 18:31:39 【问题描述】:

我在 ng-repeat 中使用不同的表单名称。

当点击表单内的某个按钮时,我想传递表单。

当我像下面这样打电话时

checkSaveDisable(updateProductSale_productIndex) it throwing some angular js error. 

可能是在函数调用中传递角度表达式。如何在函数中传递包含动态名称的表单。

html

<div ng-repeat="productSale in productSales" class="existingProductSales" ng-init="productIndex=$index">
<form name="updateProductSale_productIndex" novalidate>

---------------//

<button class="btn btn-default save-btn save-sale" ng-disabled="checkSaveDisable(updateProductSale_productIndex)" >Save</button>

</form>
</div>

【问题讨论】:

你想达到什么目的?您可以使用ngForm 指令在ngRepeat 中处理forms @developer033 尝试使用 ngForm 但想将动态表单对象传递给 javascript 为了什么你需要传递表格? 【参考方案1】:

updateProductSale_productIndex 是一个字符串值,对吧?如果是这样,要将字符串值作为参数传递,请尝试使用

ng-disabled="checkSaveDisable('updateProductSale_productIndex')"

更新:好的,如果您使用以下内容呢?

ng-disabled="checkSaveDisable('updateProductSale_' + productIndex)"

angular.module('MyApp', []).controller('AppCtrl', function($scope) 
  $scope.productSales = ['Form1', 'Form2'];
  
  $scope.click = function(val) 
    alert(val);
  ;
);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
    <div ng-repeat="productSale in productSales">
        <form name="updateProductSale_$index" novalidate>
            <button class="btn btn-default save-btn save-sale" ng-click="click('updateProductSale_' + $index)" >Save</button>
        </form>
    </div>
</div>

【讨论】:

updateProductSale_ 是一个常量值,productIndex 是一个动态值,尝试在函数中传递连接的结果,请看更新的答案。我希望这个想法很清楚。如果您仍有疑问,请告诉我。 @Antipod 它不会传递表单对象。它只是传递字符串 @SivaRajini 啊哈,我明白了。什么是表单对象?它是控制器范围内的对象吗?我会说不。我看不到您如何在表单中设置值,您没有提供代码。我会将表单中的值绑定到一个模型,该模型将是一个数组,传递元素的索引以找到它,然后在函数中使用它。我不喜欢的另一个选择是将前缀作为第一个参数传递,将动态部分(当它是一个对象,而不是纯值)作为第二个参数传递。然后我会构造表单名称并使用 angular.element 函数来查找表单。

以上是关于ng-repeat 中的表单名称并将 ng-click 函数中的表单名称传递给 javascript的主要内容,如果未能解决你的问题,请参考以下文章

删除 NG-repeat 量角器中的记录

AngularJs - 以相同名称的ng-repeat访问范围变量

ng-repeat 与每个表格行的控制器:如何访问 x-editable 表单元素?

ng-repeat 中的角度验证不起作用

angularJS ng-repeat中的directive 动态加载template

ng-cli新建项目