替换ng repeat中的一些符号

Replace some symbols inside of ng-repeat

本文关键字：符号 ng repeat 替换      更新时间：2023-09-26

我正在尝试实现这样的英语测试网页：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?",
                "answerswer":"answerswer 1"
            },           
            {
                "question":    "Jane: I think the Republicans (win) :i: the next election.",
                "answerswer":"answerswer 2"
            },           
            {
                "question":    "John: No way! The Democrats (win) :i:",
                "answerswer":"answerswer 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，到输入字段

求你了，帮帮我——我该怎么做？

附言：我对Angular和StackOverflow也很陌生：）

提前谢谢。

您可以做两件事。

  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?",
        "answerswer":"answerswer 1"
    },           
    {
        "question1":    "Jane: I think the Republicans (win)",
        "question2": "the next election.",
        "answerswer":"answerswer 2"
    },           
    {
        "question1":    "John: No way! The Democrats (win)",
        "question2": "",
        "answerswer":"answerswer 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>
  1. 您可以将问题保持原样（一个变量），并创建一个自定义角度指令，该指令将按:i:分割字符串，并在每个部分之间添加一个答案输入。如果在一个字符串中有多个:i:，这将无法正常工作。要使用多个答案字段，您必须将answer更改为列表answers: [answer1: "", answer2: ""]，并添加相应的答案字段

你几乎已经掌握了。我猜你只想回答其中一个问题。

<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="answerswer" value="exercise.answer"/></li>
            </ul>
</div>

最简单的方法是在回答时使用插值

类似：

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>

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

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);
});
相关文章：