Angularjs отправляет элементы списка в массив

0

Это небольшая игра памяти: игрок должен запомнить список слов, а затем ему представлен другой список, который содержит несколько слов из исходного списка, где он должен решить, присутствует ли какое-либо из этих слов в исходном списке. Для этого он может нажать кнопку "Да" или "Нет".

<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=[]

Первый массив - это исходный массив, против которого я должен проверять, второй массив - это то, что я представляю пользователю прямо сейчас, а третий массив может быть массивом, в котором я выдвигаю его выбор. Он выглядит следующим образом:

Изображение 174551

Как я могу это реализовать?

  • 0
    Я запутался в том, что ты пытаешься сделать. Два показанных вами массива не имеют совпадений, поэтому сравнение будет пустой тратой времени. Кроме того, что такое color.name?
  • 0
    @RaniRadcliff Не верно, "Sky", "Germany", "Rose" и "Garden" существуют в обоих массивах. Это пересечение массива javascript - я подозреваю, что поиск предыдущих вопросов SO даст несколько ответов на это.
Показать ещё 2 комментария
Теги:
ionic-framework

3 ответа

2
Лучший ответ

Обновить

См. Эту обновленную демонстрацию плункера.

Чтобы динамически заполнять данные на DOM, вы можете использовать ng-repeat. См. Код на плункер.

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

Чтобы interpolate зацикленный элемент, используйте {{ }}.

Важно: просто избегайте дублирования данных в $scope.wordsPresent array, потому что это приведет к ошибке на ng-repeat.

Вместо того, чтобы подталкивать "выбор" в конце опроса/опроса (?), Почему бы не нажимать его каждый раз, когда радио меняет его значение? Нажмите на массив, если "Да" выбрано и удалено из массива, если не выбрано значение "Нет".

В этом случае вы можете использовать событие ng-change для запуска нажатия и удаления данных в массиве на контроллере. Вы должны использовать двунаправленную привязку привязки данных, которую предлагает угловой.

Затем вы можете проверить свои массивы.

Пожалуйста, см. Эту демонстрацию plunker, которую я создал, и надеюсь, что это поможет вам.

Поделиться
  • 0
    В вашем предложении вы использовали разные div для каждого слова, однако в моем случае у меня есть оператор ng-repeat для заполнения этих строк. Может быть, вы покажете, как можно справиться с фиктивными данными в вашем plunkr?
  • 0
    Можете ли вы показать мне данные, которые вы зацикливаете? @Nitish
Показать ещё 11 комментариев
0

Мне кажется, что если вы хотите проверить правильные ответы, вам нужно сделать больше, чем просто сравнить массивы. Предположим, что они выбрали "Нет", когда что-то действительно находится в списке. Во-первых, я бы поставил ключевое поле на элементы в моем массиве, чтобы вы не были настолько ограниченными. Вот рабочий 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'
}]

Затем я бы добавил поле ответа (вы можете включить его при настройке своих данных, или вы можете включить я после следующего:

    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;
}

Счастливое кодирование!

Поделиться
0

Если вы можете обойтись с библиотекой, я бы предложил lodash.

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

Или в контексте вашей проблемы:

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

https://lodash.com/docs#intersection

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню