ng-repeat循环内md-tabs指定标签切换功能实现求助

我来帮你搞定这个需求！核心思路是给每个循环出来的消息项绑定独立的标签选中状态，这样点击按钮时只会影响当前消息的tabs，不会干扰其他项。

步骤1：给每个消息对象添加选中标签索引属性 #

首先，你需要修正原代码里ng-repeat的小笔误（原代码写的messages in data应该是message in data.messages，不然变量名重复容易混淆），然后给每个message添加一个用来记录当前选中标签的属性，比如activeTab。可以在控制器里初始化这个属性：

// 假设你的控制器结构如下
angular.module('yourApp', ['ngMaterial'])
.controller('YourController', function($scope) {
  // 你的data对象示例
  $scope.data = {
    messages: [
      {title: '消息1'},
      {title: '消息2'},
      // 其他消息数据...
    ]
  };

  // 初始化每个消息的默认选中标签（默认选中第一个"Post"标签）
  $scope.data.messages.forEach(function(msg) {
    msg.activeTab = 0;
  });

  // 切换到最后一个标签的方法
  $scope.goToLastTab = function(message) {
    // 因为固定三个标签，最后一个"Review"的索引是2；如果标签数量动态，可改用长度-1
    message.activeTab = 2;
  };
});

步骤2：修改HTML模板绑定属性与方法 #

把md-tabs和按钮绑定到对应的属性和方法，确保每个消息项的状态独立：

<ul>
  <li ng-repeat="message in data.messages">
    <h2 class="namePost">{{message.title}}</h2>
    <!-- 用md-selected绑定当前消息的activeTab属性 -->
    <md-tabs md-selected="message.activeTab">
      <md-tab label="Post">
        <p>Post标签内容区域</p>
      </md-tab>
      <md-tab label="Content">
        <p>Content标签内容区域</p>
      </md-tab>
      <md-tab label="Review">
        <p>Review标签内容区域</p>
      </md-tab>
    </md-tabs>
    <!-- 点击按钮调用方法，传入当前message对象 -->
    <button ng-click="goToLastTab(message)">当前消息最新标签</button>
  </li>
</ul>

灵活扩展：适配动态标签数量 #

如果你的标签数量不是固定3个，可以把切换方法改成动态获取最后一个标签的索引，比如给每个消息对象存标签列表，再取长度减一：

$scope.goToLastTab = function(message) {
  // 假设message里有tabs数组：message.tabs = ['Post','Content','Review',...]
  message.activeTab = message.tabs.length - 1;
};

这样不管后续新增多少标签，都能精准切换到最后一个~

内容的提问来源于stack exchange，提问作者Soccerrlife