Question

这是一个小记忆游戏：玩家必须记住一个单词列表，然后他会看到另一个列表，其中包含原始列表中的几个单词，他必须决定是否这些单词中的任何一个都出现在原始列表中。为此，他可以点击“是”＆＃39;或者＆＃39;否＆＃39;单选按钮。

<div align="center" ng-show="showWords" style="margin-bottom:1cm;">
     <div ng-repeat="word in words">
       <h4>{{word}}</h4>
     </div>
   </div>
<div align="center" ng-show="showTest" style="margin-bottom:1cm;">
     <div ng-repeat="word in wordsPresent | limitTo:limitTo">
       <h4>{{word}}</h4>
       <label>
        <input type="radio"  value="yes">
        Yes
      </label><br/>
      <label>
        <input type="radio"  ng-value="no">
        No
      </label><br/>
    </div>
 </div>
  ...
 <div align="center" ng-if="showOk">
   <button class="button button-dark" ng-click="pushToArray()">OK</button>
 </div>

在我的控制器中我有：

$scope.words=['Okra', 'Musa', 'Sky', 'India', 'Rose', 'Titanic', 'Onion', 'Germany', 'Beer', 'Run', 'Garden', 'Mountain']
$scope.wordsPresent=['King', 'Garden', 'America', 'Sky', 'Potato', 'Germany', 'Rose', 'Whisky', 'Mumbai', 'Walk']

$scope.playerChoices=[]

第一个数组是我必须检查的原始数组，第二个数组是我现在向用户呈现的内容，第三个数组可能是我推送他的选择的数组。 看起来像是：

我该如何实现？

Answer 1

<强>更新

请参阅此更新plunker demo。

要将数据动态填充到DOM上，您可以使用ng-repeat。请参阅plunker上的代码。

<span ng-repeat="item in someArray">{{item}}</span>

要interpolate循环项目，请使用{{ }}。

重要：请避免在$scope.wordsPresent数组上避免重复数据，因为它会在ng-repeat上产生错误。

而不是推动＆＃34;选择＆＃34;在测验/调查结束时（？）为什么不在每次收音机改变它的价值时都推它？如果选择是，则推送到数组，如果选择否，则从数组中删除。

在这种情况下，您可以使用ng-change事件来触发控制器上数组中数据的推送和删除。您应该利用angularjs提供的双向数据绑定。

然后您可以交叉检查阵列。

请参阅我创建的plunker demo，希望它能为您提供帮助。

Answer 2

如果您可以使用图书馆，我会建议使用lodash。

_.intersection([2, 1], [2, 3]);
// ➜ [2]

或者在问题的背景下：

_.intersection($scope.words, [$scope.wordsPresent]);
// ➜ ['Sky', 'Germany', 'Rose', 'Garden']

https://lodash.com/docs#intersection

Answer 3

在我看来，如果你想检查正确的答案，你需要做的不仅仅是比较数组。假设当列表中存在某些内容时，他们选择“否”。首先，我会在我的数组中的项目上放置一个关键字段，这样你就不那么有限了。这是一个有效的Plunker

您的数据可能看起来像这样：

 $scope.words = [{
    id: 11,
    name: 'Okra'
}, {
    id: 12,
    name: 'Musa'
}, {
    id: 4,
    name: 'Sky'
}, {
    id: 13,
    name: 'India'
}, {
    id: 14,
    name: 'Rose'
}, {
    id: 15,
    name: 'Titanic'
}, {
    id: 16,
    name: 'Onion'
}, {
    id: 6,
    name: 'Germany'
}, {
    id: 17,
    name: 'Beer'
}, {
    id: 18,
    name: 'Run'
}, {
    id: 2,
    name: 'Garden'
}, {
    id: 19,
    name: 'Mountain'
}]
$scope.wordsPresent = [{
    id: 1,
    name:'King'
},
{
    id: 2,
    name: 'Garden'
}, {
    id: 3,
    name: 'America'
}, {
    id: 4,
    name: 'Sky'
}, {
    id: 5,
    name: 'Potato'
}, {
    id: 6,
    name: 'Germany'
}, {
    id: 7,
    name: 'Rose'
}, {
    id: 8,
    name: 'Whisky'
}, {
    id: 9,
    name: 'Mumbai'
}, {
    id: 10,
    name: 'Walk'
}]

然后我会添加一个答案字段（您可以在设置数据时包含它，或者您可以像我这样包含i：

    setAnswers();
function setAnswers() {
    angular.forEach($scope.wordsPresent, function (value, key) {
        $scope.wordsPresent[key].answer = 'no';
    });
    angular.forEach($scope.words, function (value, key) {
        $scope.words[key].answer = 'yes';
    })
}

您的HTML可能如下所示：

<div ng-app="myModule" ng-controller="HomeCtrl">
    <div align="center" style="margin-bottom:1cm;">
        <div ng-repeat="word in wordsPresent | limitTo:limitTo">
            <h4>{{word.name}}</h4>

                <input type="radio" ng-model="word.answer" value="yes">
                Yes
            <br />

                <input type="radio" ng-model="word.answer" value="no">
                No
            <br />
        </div>
    </div>
    <div ng-show="showAnswers">
        <span>Correct Answers: {{correct}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>Incorrect Answers: {{wrong}}</span>
        You selected:
        <div ng-repeat="a in playerChoices">
            <span>{{a.name}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>{{a.answer}}</span>

        </div>
    </div>

    <div align="center">
        <button class="button button-dark" ng-click="pushToArray()">OK</button>
    </div>
</div>

在你的控制器中：

$scope.pushToArray = function () {
    $scope.correct = 0;
    for (var i = 0; i < $scope.wordsPresent.length; i++) {
            $scope.playerChoices.push($scope.wordsPresent[i]);

    }

    $scope.showAnswers = true;
    $scope.correct = correctAnswers($scope.playerChoices, $scope.words);

}
function correctAnswers(checkerArray, targetArray) {
    correct = 0;
    wrong = 0;
    for (var i = 0; i < checkerArray.length; i++) {
        if (checkerArray[i].answer == 'yes') {

            if (containsObject(checkerArray[i], targetArray) == true) {
                correct = correct + 1;
            }
        }
        else if (checkerArray[i].answer = 'no') {

            if (containsObject(checkerArray[i], targetArray) == false) {
                correct = correct + 1;
            }
        }

    }
    return correct;
}
function containsObject(obj, list) {
    var i;
    for (i = 0; i < list.length; i++) {
        if (list[i].id === obj.id) {
            return true;
        }
    }

    return false;
}

快乐的编码！

Angularjs将列表元素推送到数组

3 个答案: