Question

我正在尝试实现这样的英语测试网页：http://www.englishpage.com/verbpage/verbs20.htm

所以，我在控制器中有JSON：

var studyEng = angular.module('studyEng', []);

studyEng.controller('ExercisesController', function ($scope) {

    $scope.exercises = {
        'title':'Will / Be Going To',
        'description':'Using the words in parentheses, complete the text below with the appropriate tenses, then click the "Check" button to check your answers.',
        'exercise':[
            {
                "question":    "Michael: Do you think the Republicans or the Democrats (win) :i: the next election?",
                "answer":"answer 1"
            },           
            {
                "question":    "Jane: I think the Republicans (win) :i: the next election.",
                "answer":"answer 2"
            },           
            {
                "question":    "John: No way! The Democrats (win) :i:",
                "answer":"answer 3"
            }
          ]
    } 
});

和Angular模板：

<div class="starter-template">
            <h1>{{exercises.title}}</h1>
            <p>{{exercises.description}}</p>
            <ul ng-repeat="exercise in exercises.exercise">
                <li>{{exercise.question}}</li>
            </ul>
</div>

我想做的是，改变：i：从我的JSON到输入字段

请帮帮我 - 我怎么能这样做？

P.S。我在Angular和StackOverflow中也是新手：）

提前致谢。

Answer 1

你可以做两件事。

您可以将问题分成两部分（假设只有两部分）。

$scope.exercises = {
'title':'Will / Be Going To',
'description':'Using the words in parentheses, complete the text below with the appropriate tenses, then click the "Check" button to check your answers.',
'exercise':[
    {
        "question1":    "Michael: Do you think the Republicans or the Democrats (win)",
        "question2" : "the next election?",
        "answer":"answer 1"
    },           
    {
        "question1":    "Jane: I think the Republicans (win)",
        "question2": "the next election.",
        "answer":"answer 2"
    },           
    {
        "question1":    "John: No way! The Democrats (win)",
        "question2": "",
        "answer":"answer 3"
    }
  ]

};

然后将模板更改为：

    <div class="starter-template">
            <h1>{{exercises.title}}</h1>
            <p>{{exercises.description}}</p>
            <ul ng-repeat="exercise in exercises.exercise">
                <li>
<div>{{exercise.question1}}</div>
<input type="text" ng-model="exercise .answer" />
<div>{{exercise.question2}}</div>
</li>
            </ul>
</div>

您可以保留问题（一个变量）并创建一个自定义角度指令，该指令将字符串分割为:i:并在每个部分之间添加答案输入。如果您在一个字符串中有多个:i:，这将无法正常工作。要使用多个答案字段，您必须将answer更改为列表answers: [answer1: "", answer2: ""]并添加相应的答案字段。

Answer 2

你几乎得到了它。我猜你只想要回答其中一个问题。

<div class="starter-template">
            <h1>{{exercises.title}}</h1>
            <p>{{exercises.description}}</p>
            <ul ng-repeat="exercise in exercises.exercise">
                <li>{{exercise.question}} <input type="radio" ng-model="answer" value="exercise.answer"/></li>
            </ul>
</div>

Answer 3

最简单的方法是使用插值，因为answer

像：

function ctrl ($scope, $interpolate) {
  $scope.Txt = "This is some text {{Rest}}";
  $scope.Rest = "and this is the rest of it.";
  $scope.interpolate = function (value) {
    return $interpolate(value)($scope);
  };
}  
<div ng-app ng-controller="ctrl">
  <input ng-model="Txt" size="60" />
  <p>{{ Txt }}</p>
  <p>{{ interpolate(Txt) }}</p>
</div>

Answer 4

我找到了一些解决方案。我做了过滤器：

studyEng.filter ('inputForms', function () {
    return function (input) {
        var output;
        var inputFild = '<input type="text"></input>';

        output = input.replace (':i:', inputFild);
        return output;
    }
});

然后应用它：

<ul ng-repeat="exercise in exercises.exercise">
                <li>
                    <div ng-bind-html="exercise.question | inputForms"></div>
                </li>
            </ul>

我只是不知道如何仅为此转发器绑定HTML，因此我已全局禁用SCE：

studyEng.config(function($sceProvider) {
  // Completely disable SCE.  For demonstration purposes only!
  // Do not use in new projects.
  $sceProvider.enabled(false);
});

替换ng-repeat内的一些符号

4 个答案: