Question

我尝试使用Divs使用ng-repeat生成Div ID来实现像功能一样的Tabs。

    <div class="col-md-10">
   <div id="div{{$index}}" class="targetDiv" ng-show="setSomething" ng-repeat="question in Questions">
       <h3>{{question.question}}</h3>

        <button style="width: 100%; margin-bottom: 4px; padding-bottom: 2px;" class="btn btn-primary" ng-repeat="answers in question.Answers">
                  {{answers.AnswerText}}
        </button>

        <a class="showSingle btn btn-primary" ng-click="doSomething()">Next</a>
    </div>
 </div>

我尝试了很多方法甚至尝试使用Google搜索相似的内容，但我无法实现它，可能是因为AngularJs的知识有限。我想尝试像下面的图像那样的东西。请记住，每张图片代表一个DIV，当您点击下一个当前DIV隐藏时，DIV会显示第二个问题。。 Div1 Div2

控制器代码：

  $scope.showonlyone = function (divToShow) {
        angular.forEach($scope.Questions, function (que, i) {
            if (divToShow == 'div' + i) {
                //$scope.Questions.splice(que, 1);
                return true;
            } else {
                return false;
            }
        })
    };

Answer 1

控制器：

.controller('QuestionListController', function ($scope) {
    $scope.activeIndex = 0;

    $scope.next = function () {
        if ($scope.activeIndex === ($scope.Questions.length - 1)) {
            alert("finished");
        } else {
            $scope.activeIndex = $scope.activeIndex + 1;
        }
    }
});

HTML：

<div ng-controller="QuestionListController">
    <div ng-repeat="question in Questions" ng-if="$index == activeIndex">
        ...
    </div>
    <button ng-click="next()">Next</button>
</div>

但你可能想考虑把它变成一个指令。

Answer 2

这样的事情应该有效：

<div class="col-md-10">
   <div class="targetDiv" ng-show="($index == selectedIndex)" ng-repeat="question in Questions">
       <h3>{{question.question}}</h3>

        <a class="showSingle btn btn-primary" ng-click="selectedIndex = selectedIndex + 1">Next</a>
    </div>
 </div>

顺便说一句，如果你想显示1个问题你不需要ng-repeat：

<div class="targetDiv">
   <h3>{{questions[selectedIndex].question}}</h3>

   <a class="showSingle btn btn-primary" ng-click="selectedIndex = selectedIndex + 1">Next</a>
</div>

Answer 3

以下情况应该有效，尽管我还没有在真实环境中对其进行测试：

$scope.setActive = function(index) {
  $scope.selectedQuestionIndex = index + 1;
}

$scope.isActive = function(index) {
  return index == $scope.selectedQuestionIndex;
}

你的html是：

<div class="col-md-10">
  <div id="div{{$index}}" class="targetDiv" ng-show="isActive($index)" ng-repeat="question in Questions">
    <h3>{{question.question}}</h3>

    <button style="width: 100%; margin-bottom: 4px; padding-bottom: 2px;" class="btn btn-primary" ng-repeat="answers in question.Answers">
              {{answers.AnswerText}}
    </button>

    <a class="showSingle btn btn-primary" ng-click="setActive($index)">Next</a>
  </div>
</div>

Answer 4

也许这样的事情适合你

<div class="col-md-10" ng-init="firstQuestion()">
    <div ng-repeat="question in Questions" class="targetDiv" ng-show="$index == currentQuestionIndex">
        <h3>{{question.question}}</h3>

        <button style="width: 100%; margin-bottom: 4px; padding-bottom: 2px;" class="btn btn-primary" ng-repeat="answers in question.Answers">
            {{answers.AnswerText}}
        </button>

        <a class="showSingle btn btn-primary" ng-click="doSomething()" ng-show = "currentQuestionIndex < Questions.length - 1">Next</a>
    </div>
</div>

与js相似

$scope.firstQuestion = function () {
            $scope.currentQuestionIndex = 0;
        };

        $scope.doSomething = function () {
            if ($scope.currentQuestionIndex < $scope.Questions.length)
                $scope.currentQuestionIndex += 1;
        }

或类似的东西

<div class="col-md-10" ng-init="firstQuestion()">    
    <h3>{{question.question}}</h3>

    <button style="width: 100%; margin-bottom: 4px; padding-bottom: 2px;" class="btn btn-primary" ng-repeat="answers in question.Answers">
        {{answers.AnswerText}}
    </button>

    <a class="showSingle btn btn-primary" ng-click="doSomething()" ng-show = "currentQuestionIndex < Questions.length - 1">Next</a>
</div>

使用js

$scope.firstQuestion = function () {
            $scope.currentQuestionIndex = 0;
            $scope.question = $scope.Questions[$scope.currentQuestionIndex];
        };

        $scope.doSomething = function () {
            if ($scope.currentQuestionIndex < $scope.Questions.length) {
                $scope.currentQuestionIndex += 1;
                $scope.question = $scope.Questions[$scope.currentQuestionIndex];
            }
        }

显示隐藏Div的角度方式类似于Tabs但没有Tabs

4 个答案: