2016-07-29 4 views
0

작은 메모리 게임 : 플레이어는 단어 목록을 기억해야하며 원래 목록에서 몇 단어가 들어있는 다른 목록이 제시됩니다 이 단어들은 원래 목록에있었습니다. 이를 위해 그는 '예'또는 '아니오'라디오 버튼을 클릭 할 수 있습니다. 내 컨트롤러에서Angularjs가 배열에 목록 요소를 푸시

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

첫 번째 배열은 내가 확인해야하는에 원래의 배열, 두 번째 배열은 내가 지금 사용자에게 제시하고, 세 번째 배열하고있는 무슨이다 내가 그의 선택을 밀어 넣는 배열일지도 모른다. 다음과 같습니다

enter image description here

가 어떻게이를 구현 할 수 있습니까?

+0

나는 당신이하려는 일에 대해 혼란스러워합니다. 표시하는 두 배열에는 일치 항목이 없으므로 비교하면 시간이 낭비됩니다. 또한, color.name은 무엇입니까? –

+0

@RaniRadcliff 사실, "Sky", "Germany", "Rose"및 "Garden"은 모두 두 배열에 있습니다. 이것은 자바 스크립트 배열 교차점입니다 - 나는 이전의 검색 결과에 대한 의문이 이것에 대한 몇 가지 답변을 표시합니다. – Lex

+0

모든 대답이 올바른지 확인 하시겠습니까? 또는 어떤 질문에 올바르게 대답했는지 알아야합니까? – ksav

답변

2

업데이트

plunker demo 업데이트를 참조하십시오.

DOM에 데이터를 동적으로 채우려면 ng-repeat을 사용할 수 있습니다. plunker의 코드를 참조하십시오.

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

루프 된 항목 interpolate에, {{ }}를 사용합니다.

중요 : 중복 데이터가 $scope.wordsPresent 배열에 저장되지 않도록하십시오. 오류 발생시 ng-repeat에 오류가 발생합니다. 대신 퀴즈/설문 조사의 끝에서 "선택"을 밀어


(?) 왜 라디오가 그것의 값을 변경 할 때마다 밀어하지? 예가 선택되면 배열로 푸시하고 배열을 선택하지 않으면 배열에서 제거합니다.

그런 경우 ng-change 이벤트를 사용하여 컨트롤러의 배열에서 데이터를 밀어 넣고 제거 할 수 있습니다. anglejs가 제공하는 2 가지 방식의 데이터 바인딩을 활용해야합니다.

그런 다음 배열을 확인할 수 있습니다.

본 내용을 참조하십시오. plunker demo 작성했으며 도움이되기를 바랍니다.

+0

당신의 제안에 각 단어마다 다른 div를 사용했습니다. 그러나 제 경우에는 해당 행을 채우기 위해 ng-repeat 문을 사용했습니다. plunkr에서 더미 데이터를 어떻게 처리 할 수 ​​있는지 보여줄 수 있습니까? – Nitish

+0

루핑중인 데이터를 표시 할 수 있습니까? @Nishish – CENT1PEDE

+0

@Foxx 제 질문이 업데이트되었습니다. 지금은 분명합니다. – Nitish

0

라이브러리로 할 수 있다면, 나는 로다시를 제안 할 것입니다.

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

또는 문제의 맥락에서

:

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

https://lodash.com/docs#intersection

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

해피 코딩!