Question

我想要实现的目标：我有一个名为data的对象，它包含一组消息。使用ng-repeat，我遍历所有消息并显示它们。每条消息都包含一个标题，md-tabs和一个按钮“最新的当前消息标签”。 md-tabs有3个标签：'Post'，'Content'和'Review'。如果我单击h4按钮，则应显示该特定消息的最新选项卡（在本例中为“Review”）。

到目前为止我所拥有的：

HTML

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/superagent/2.2.0/superagent.min.js"></script>

@Scripts.Render("~/bundles/jquery");
@Scripts.Render("~/bundles/jqueryval");

<script type="text/javascript">
$(document).ready(function () {
    var frm = $("#contactForm");
    frm.validate();
});

function contactSubmit() {
    var f = $("#contactForm");
    if (f.valid()) {
        superagent
            .post(*** Azure Logic App URL ***)
            .send({
                name: document.getElementById('Name').value,
                email: document.getElementById('Email').value,
                phone: document.getElementById('Phone').value,
                message: document.getElementById('Message').value
            })
            .end(function (err, res) {
                if (err || !res.ok) {
                    alert('Whoops. Something went wrong.');
                } else {
                    var div = document.getElementById('contactDiv');
                    var successText = document.getElementById('contactText');
                    div.style.display = "none";
                    successText.Text = "Thanks! We'll be in touch";
                    successText.innerHTML = "Thanks! We'll be in touch";
                    successText.value = "Thanks! We'll be in touch";
                }
            });
        return false;
    }

    else {
        return false;
    }

}
</script>

AngularJS

    <ul>
     <li ng-repeat="messages in data">
       <h2 class="namePost"> {{messages.title}}</h2>
       <div ng-cloak>
         <md-content>
           <md-tabs md-selected="selectIndex" md-align-tabs="bottom"
                    md-center-tabs="true" class="md-no-animation"
                    md-no-ink md-no-bar>
             <md-tab label="Post">
               <md-content>
                 <h1>test text</h1>
               </md-content>
             </md-tab>
             <md-tab label="Content">
               <md-content>
                 <h1>test text</h1>
               </md-content>
             </md-tab>
             <md-tab label="Review">
               <md-content>
                 <p> blabla </p>
               </md-content>
             </md-tab>
           </md-tabs>
        </md-content>
        <h4 ng-click="latestTab()"> LATEST TAB OF CURRENT MESSAGE</h4>
      </li>
   </ul>

如果我现在点击h4按钮，所有消息都会转到最新选项卡。但是，我不希望每条消息都显示最新的选项卡，而只显示我点击的那个。

Answer 1

使选择器成为ng-repeat迭代器的属性：

 <li ng-repeat="messages in data">
   <md-tabs md-selected="s̶e̶l̶e̶c̶t̶I̶n̶d̶e̶x̶ messages.selectIndex"
            md-align-tabs="bottom"
            md-center-tabs="true" class="md-no-animation"
            md-no-ink md-no-bar>
       <!-- ..... -->
   </md-tabs>

    <h4 ng-click="latestTab(messages)"> LATEST TAB OF CURRENT MESSAGE</h4>
 </li>

然后在迭代器上设置值：

   $scope.latestTab = function(messages){
     messages.selectedIndex = 2;
   }

ng-repeat中md-tabs的特定选项卡

1 个答案: