ng-repeat内的html按钮不起作用 [英] html button inside ng-repeat is not working

问题描述

我正在尝试导入一个客户列表，并且我想要进入一个个性化的客户页面，其中包含有关客户的特定信息（使用函数showit）。我现在有这个：

I'm trying to import a list of customers, and I want to proceed to a personalized customer page with specific information about a customer (using function showit). I currently have this:

<table ng-controller="patientsCtrl" class="table-responsive" class="fixed">                     
        <thead>
            <th>ID</th>
            <th>Name</th>
            <th>Policy Nr</th>
            <th>Pol. Type</th>
            <th>Check</th>
        </thead>
        <tbody>
            <tr ng-repeat="p in patients | orderBy:'patID'">
            <td>{{ p.patID }}</td>
            <td>{{ p.name }}</td>
            <td>{{ p.policy_number }}</td>
            <td>{{ p.policy_type }}</td>
            <td> <button ng-click="showit(p.name)">check</button> </td>
        </tbody>
</table>

推荐答案

只要假装它写成<按钮ng-click =vari = true>检查< /按钮> 。这个按钮在表格内部不起作用（函数阶段我会稍后实现）

Just pretend that it's written <button ng-click="vari=true">check</button> . the button is not working when inside the table (the function phase I will implement later)

你有一个范围问题。该按钮在表格内工作，但由于范围层次结构，数据不会超出表格。

You have a scoping issue. The button is working inside the table but the data is not getting outside the table because of the scope hierarchy.

<div ng-controller="patientsCtrl">
    <p>{{vari}}</p>
    <table class="table-responsive" class="fixed">                     
        <thead>
            <th>ID</th>
            <th>Name</th>
            <th>Policy Nr</th>
            <th>Pol. Type</th>
            <th>Check</th>
        </thead>
        <tbody>
            <tr ng-repeat="p in patients | orderBy:'patID'">
            <td>{{ p.patID }}</td>
            <td>{{ p.name }}</td>
            <td>{{ p.policy_number }}</td>
            <td>{{ p.policy_type }}</td>
            <td> <button ng-click="$parent.vari=true">check</button> </td>
        </tbody>
    </table>
    <p>{{vari}}</p>
</div>

ng-repeat 为每个项目在集合中。要将数据放在控制器的范围中，请使用 $ parent 。

ng-repeat creates a scope for each item in a collection. To put data on the controller's scope, use $parent.

从文档：

ngRepeat 指令为集合中的每个项目实例化一次模板。每个模板实例都有自己的作用域，其中给定的循环变量被设置为当前的集合项目，并且 $ index 被设置为项目索引或键。

The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.

- https://docs.angularjs.org/api/ng/directive/ng重复

这篇关于ng-repeat内的html按钮不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！