更改带有md-tabs的md-selected和使用md-button(上一个,下一个)

时间:2019-07-01 20:21:28

标签: angularjs-material

使用不同的更改选项卡索引的方法切换选项卡时,我遇到一种奇怪的行为。我可以通过ng-click使用md-selected函数来更改$scope.changeQuestion。我还可以使用md-tab的内置单击来更改md-selected问题出在时,是我单击md-tab,然后尝试单击利用$scope.changeQuestion功能的上一个或下一个按钮。如果单击选项卡,然后尝试使用按钮更改索引,则按钮不再更改选项卡索引。但是,它们确实记录了我想切换到的适当索引。

控制器

$scope.changeQuestion = function(index){
     $scope.selectedQuestion = index;
};

html

<md-tabs md-selected='selectedQuestion' md-stretch-tabs md-dynamic-height md-border-bottom>
        <md-tab ng-repeat='question in assessment.questions | toArrayKeepKeys | orderBy: "order"'>
            <md-tab-label>
                {{question.order}} <i class="fas fa-fire fire" ng-if='question.bonus'></i>
            </md-tab-label>
            <md-tab-body>
                <div class='question-tab-content'>
                    <question class='margin-top-1em' details='question' answer='answers[question.key]'></question>
                    <div>
                        <md-button ng-click='changeQuestion($index - 1)' ng-hide='question.order === 1' class='md-primary md-raised no-left-margin'>Previous</md-button>
                        <md-button ng-click='changeQuestion($index + 1)' ng-hide='question.order === _.size(assessment.questions)' class='md-primary md-raised no-left-margin'>Next</md-button>
                    </div>
                </div>
            </md-tab-body>
        </md-tab>
    </md-tabs>

以下是行为示例:

enter image description here

我能够获得working example in codepen,但似乎无法在我的项目中使用它。

更新

尝试将$ watch放在$ scope.selectedQuestion上,如果我单击选项卡,则不会触发。就像md-selected ='selectedQuestion'和$ scope.selectedQuestion不同,但只有在单击选项卡之后。

1 个答案:

答案 0 :(得分:0)

找到了解决方案: scope inheritance

$scope.selectedQuestion = 0;更改为$scope.selectedQuestion = { selected: 0 };并更新其他引用可以达到目的。

无法解释:为什么codepen example在没有解决方案的修改的情况下工作