我的代码有些麻烦。
我正在尝试开发一个问卷应用程序,该应用程序将仅包含5个问题,每个问题有4种变体。
我在ng-switch
中使用了ng-repeat
,但是它不起作用。
附言这只是教育项目。
有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>
最佳答案
你写了:
<div ng-switch-on="task.id">
但是应该是:
<div ng-switch on="task.id">