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

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 ，您还可以使用track by $index （ 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`

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