Question

我的代码有些麻烦。我正在尝试开发一个问卷应用程序，该应用程序将仅包含5个问题，每个问题有4个变体。我在ng-switch内使用了ng-repeat，但是它不起作用。

P.S。这只是教育项目。

有index.html和app.js：

const testApp = angular.module('tespApp',[]);
testApp.controller('testAppCtrl', function ($scope) {
    $scope.tasks = [
        {id: '1', question1: 'Lorem ipsum dolor sit amet.', question2: 'Lorem ipsum dolor sit amet.', question3: 'Lorem ipsum dolor sit amet.', question4: 'Lorem ipsum dolor sit amet.'},
        {id: '2', question1: 'Lorem ipsum dolor sit amet.', question2: 'Lorem ipsum dolor sit amet.', question3: 'Lorem ipsum dolor sit amet.', question4: 'Lorem ipsum dolor sit amet.'},
        {id: '3', question1: 'Lorem ipsum dolor sit amet.', question2: 'Lorem ipsum dolor sit amet.', question3: 'Lorem ipsum dolor sit amet.', question4: 'Lorem ipsum dolor sit amet.'},
        {id: '4', question1: 'Lorem ipsum dolor sit amet.', question2: 'Lorem ipsum dolor sit amet.', question3: 'Lorem ipsum dolor sit amet.', question4: 'Lorem ipsum dolor sit amet.'},
        {id: '5', question1: 'Lorem ipsum dolor sit amet.', question2: 'Lorem ipsum dolor sit amet.', question3: 'Lorem ipsum dolor sit amet.', question4: 'Lorem ipsum dolor sit amet.'},
    ];
    $scope.left = $scope.tasks.length;
    $scope.taskNow = $scope.tasks[0].id;
});

<!DOCTYPE html>
<html lang="en" ng-app="tespApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="app.js"></script>
</head>
<body ng-controller="testAppCtrl">
    <h1>Тест</h1>
    <h2>Осталось вопросов: {{left}}</h2>
    <h3>Вопрос: №{{taskNow}}</h3>
    <div ng-repeat="task in tasks">
        <div ng-switch-on="task.id">
            <div ng-switch-when="1">1</div>
            <div ng-switch-when="2">2</div>
            <div ng-switch-when="3">3</div>
            <div ng-switch-when="4">4</div>
            <div ng-switch-when="5">5</div>
        </div>
    </div>
</body>
</html>

Answer 1

您写道：

<div ng-switch-on="task.id">

但是应该是：

<div ng-switch on="task.id">

ng-switch在ng-repeat AngularJS中不起作用

1 个答案: