Javascript 替换ng repeat中的某些符号

我正在尝试实现这样的英语测试网页：

所以，控制器中有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"
            }
          ]
    } 
});

和角度模板：

<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也很陌生：

---

提前谢谢。

你可以做两件事

假设只有两部分，你可以把问题分成两部分

$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:，则此操作将无法正常工作。要使用多个答案字段，您必须将答案更改为列表答案：[答案1:，答案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>

---

最简单的方法是使用插值，正如他所说

比如：

---

我找到了一些解决办法。我制作了一个过滤器：

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

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

---

你能把当前的工作代码放进一个plunker吗？

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>

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