Question

我是AngularJS的新手。我正在将一些页面转换为AngularJS。我只是显示了一系列信息。但是我将按钮onclick部件转换为AngularJS时遇到了问题。有人可以帮帮我吗。下面是我正在使用的代码。

<div ng-repeat="i in data">
 <p>{{i.name}}</p>
<button class="btn btn-xs btn-default" data-toggle="modal" data-target=".show-ticket-details-modal" onclick="show_details(10)">
          <i class="fa fa-info"></i>
        </button>
</div>

Answer 1

将模型传递给show_details方法

show_details(i)

此致

Answer 2

尝试使用ng-click（https://docs.angularjs.org/api/ng/directive/ngClick）。单击元素时，它会在角度控制器中运行一个函数。您所要做的就是将ng-click指令添加到元素中，然后在角度控制器中构建一个具有相同名称的函数来处理数据。

IE，将onclick="show_details(10)"替换为：ng-click="show_details(10)"。

然后，在您的控制器中，构建一个具有相同名称的函数来处理数据show_details(10)，如：

$scope.show_details = function(index) { 
    console.log(index); // will log 10 in the example above
    // do stuff with your index here, 
    // pass data to your angular factory, etc.
};

注意：对于<form>元素，您可以改为使用ng-submit指令（https://docs.angularjs.org/api/ng/directive/ngSubmit）。只需使用ng-submit="someFunction()"代替ng-click。

另一个想法：

您可以使用10（https://docs.angularjs.org/api/ng/directive/ngRepeat#）代替传递号码track by $index，例如，在您的ng-repeat中，您可以：

ng-repeat="i in data track by $index"

现在，您实际上可以将$index传递到ng-click函数，而不是10：

ng-click="show_details($index)" // $index will be 10, if the index of `i` was 10 in `data`

希望这有所帮助，如果您有任何疑问，请告诉我！包含的链接显示了更多使用它们的示例！

如何在AngularJS中单击行时显示模式中特定行的详细信息

2 个答案:

另一个想法：