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

时间:2018-05-08 21:17:37

标签: angularjs material-design

我想要实现的目标: 我有一个名为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按钮,所有消息都会转到最新选项卡。但是,我不希望每条消息都显示最新的选项卡,而只显示我点击的那个。

1 个答案:

答案 0 :(得分:0)

使选择器成为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;
   }