Question

我的目标是在纯粹的AngularJS中创建一个空白填空活动，该活动收集包含带有空白标记的短语的记录，正确答案以及与它们一起显示的错误答案。

我在下面的AngularJS / jQuery中编写了一个原型，它具有我想要的交互功能，也在这里：http://jsfiddle.net/kkLdzngv/2/

我现在需要做的是：

用AngularJS代码替换所有jQuery代码
使其动态化，以便不仅显示一个短语，而且集合中的所有短语都会显示输入字段，每个字段都具有我原型中的功能

特别是，我不理解正确的AngularJS方法。我假设我需要使用ng-repeat来遍历$scope.texts，而在ng-repeat内我会拥有<div class="item">。但是那时，我需要使用AngularJS的哪些功能来创建原型中显示的功能？

HTML：

<div class="item">
    <div class="text">Customer 1 is from <input id="record_1_blank_1" ng-change="checkEntry_record_1_blank_1()" ng-model="record_1_blank_1"/> and Customer 2 is from <input id="record_1_blank_2" ng-model="record_1_blank_2"/>.</div>
    <div class="answers">Munich, <span id="answer2">Berlin</span>, Frankfurt, Stuttgart, Hamburg</div>
</div>

JavaScript的：

$scope.texts = [
    {
        body: 'Customer 1 is from [@@blank] and Customer 2 is from [@@blank].',
        correctAnswers: 'Berlin;Hamburg',
        incorrectAnswers: 'Stuttgart;Munich;Frankfurt'
    },
    {
        body: 'Company 3 is located in [@@blank].',
        answers: 'Bremen'
    }
];

$scope.checkEntry_record_1_blank_1 = function (obj) {
    if ($scope.record_1_blank_1 == 'Berlin') {
        $('#record_1_blank_1').css(
                {
                    background: 'lightgreen'
                })
                .attr('disabled', 'disable');
        $('#record_1_blank_2').focus();
        $('#answer2').css('text-decoration', 'line-through');
    }
};

如何将此代码从静态AngularJS / jQuery移动到动态AngularJS？

0 个答案: