Значение переменной для значения $

Question

EDIT: После предыдущих ответов в JS были внесены поправки, чтобы запустить весь код в http.get. Я также добавил HTML.

Текущая страница может быть просмотрен на: http://www.kamac.co.uk/wordplay3/#/gamecontrol

У меня есть AngularJS приложение с помощью следующего кода в контроллере:

var vm = this; 

$http.get('data/data.json').success(function(data) { 
    $scope.entries = data; 
    var rand = Math.floor(Math.random()*$scope.entries.length); 

    $scope.selectedWord = $scope.entries[rand].word; 
    $scope.selectedDefinition = $scope.entries[rand].definition; 

     vm.topsecret = "TopSecret"; 
     vm.letter = []; 

     vm.checkLetter = function(index){ 
    if(vm.topsecret[index] === vm.letter[index]){ 
     vm.result = "letter was correct" 
    } else { 
     vm.letter[index] = ""; 
     vm.result = "nope"; 
    } 
} 

Обе части кода поступать так, как ожидалось. Функция $ http.get считывает JSON-файл и устанавливает $ scope.selectedWord для случайно выбранного слова.

Вторая часть создает несколько полей ввода для каждой буквы в слове, сохраненном в vm.topsecret.

Моя проблема заключается в том, что только если vm.topsecret жестко закодирован. Как я могу получить vm.letter равным $ scope.selectedWord?

Я пробовал очевидное: vm.topsecret = $ scope.selectedWord, но это приводит к пустым значениям.

HTML

<section class="spellbound container-fluid"> 
<div class="jumbotron"> 
<h1>SpellBound</h2> 
<p>Below you will see a definition of one of the words in the dictionary. Enter a correct letter and the square turns green - enter a wrong letter and it turns red.</p> 
</div> 

<div class="panel panel-info"> 
    <div class="panel-heading">How do you spell the word that means</div> 
    <div class="panel-body">{{selectedDefinition}}</div> 
</div> 

<p>Answer: {{selectedWord}}</p> 

<p>VM: <span>{{vm.topsecret}}</span> 

<div ng-controller="GamecontrolController as vm"> 
    <input type="text" ng-model="vm.letter[$index]" ng-repeat="letter in vm.topsecret track by $index" ng-change="vm.checkLetter($index)"/> 
    <p><span>{{vm.result}}</span></p> 
</div> 
<div> 
    <a ng-click="reloadPage()" class="btn btn-info btn-lg" role="button">Play Again</a> 
    <a href="#/home" class="btn btn-info btn-lg" role="button">Back To Menu</a> 
</div> 

Answer 1

Попробуйте переставить vm.topsecret, как показано ниже:

var vm = this; 
    $http.get('data/data.json').success(function(data) { 
    $scope.entries = data; 
    var rand = Math.floor(Math.random()*$scope.entries.length); 

    $scope.selectedWord = $scope.entries[rand].word; 
    $scope.selectedDefinition = $scope.entries[rand].definition; 
vm.topsecret = $scope.selectedWord; 
}); 



vm.letter = []; 

vm.checkLetter = function(index){ 
    if(vm.topsecret[index] === vm.letter[index]){ 
     vm.result = "letter was correct" 
    } else { 
     vm.letter[index] = ""; 
     vm.result = "nope"; 
    } 
} 

Это только предположение, так как я не могу видеть ваш HTML и как вы используете vm.topsecret ,