【问题标题】:Get index of row in table using angularJS使用angularJS获取表中行的索引
【发布时间】:2018-04-06 16:31:08
【问题描述】:

我想使用 angularJS 获取该表中每一行的索引

<table>
<tbody>
  <tr ng-repeat = "cust in costomers">
     <td> cust.name </td>
     <td> cust.phone </td>
     <td> cust.address </td>
  </tr>
</tbody>

我想要一个包含每行索引的变量,而不只是显示它

【问题讨论】:

  • variable that contains the index 是什么意思?解释预期用途
  • 每一行中的数据将根据需要更改它因此而不是将其发送到服务器然后再次接收以显示给用户我想直接更改它而不需要获取每次我更改行的索引时,它都来自服务器
  • 甚至不需要索引,将cust 作为参数传递给任何控制器方法。仍然不太清楚更高级别的问题是什么

标签: javascript angularjs angularjs-ng-repeat


【解决方案1】:

你可以使用 $index

   <tr ng-repeat = "cust in costomers">
     <td> {{$index}} </td>
  </tr>

【讨论】:

    【解决方案2】:

    我认为您应该使用&lt;tr&gt; 标签来放置您的ng-repeat 指令。 您可以使用ng-repeat's $index 属性。请参阅 ng-repeatdocumentation

    <table>
      <tbody>
        <tr ng-repeat = "cust in costomers">
          <td> {{$index}} </td>
          <td> {{cust.name}} </td>
          <td> {{cust.phone}} </td>
          <td> {{cust.address}} </td>
        </tr>
      </tbody>
    </table>
    

    【讨论】:

    • 我想要一个包含每一行索引的变量,而不是仅仅显示它
    • 你能告诉我你的用例让每个项目都有一个索引属性吗?也许还有其他方法可以解决您的问题?
    • 每一行中的数据将根据需要更改它因此而不是将其发送到服务器然后再次接收以显示给用户我想直接更改它而不需要获取每次我更改行的索引时,它都来自服务器
    【解决方案3】:

    $index 在未过滤 ng-repeat 时工作正常。如果您使用过滤器,最好使用 indexOf()。示例:

    <input type="text" ng-model="filterCustomers" placeholder="search...">
    <table>
      <tbody>
        <tr ng-repeat = "cust in costomers | filter:filterCustomers">
          <td> {{costomers.indexOf(cust) + 1}} </td>
        </tr>
      </tbody>
    </table>
    

    【讨论】:

      【解决方案4】:

      如果你想使用自己的变量作为index,你可以使用这个:

      <table>
      <tbody>
        <tr ng-repeat = "(index, cust) in costomers">
           <td> {{index}} </td>
           <td> cust.name </td>
           <td> cust.phone </td>
           <td> cust.address </td>
        </tr>
      </tbody>
      

      【讨论】:

        猜你喜欢
        • 2018-08-25
        • 2020-09-06
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-06-08
        • 1970-01-01
        • 2016-10-01
        • 1970-01-01
        相关资源
        最近更新 更多