javascript - AngularJS:单击时如何在另一个div上显示元素

Question

我有一个字母数组，我想记录单击的任何字母。

HTML:

<div class="col-md-2 col-sm-10 col-lg-1 letters" 
ng-repeat="choice in images[num].letters track by $index">
    <ul>
        <li ng-click="displayLetter()"class="wordList">
            {{choice}}
        </li>
    </ul>
</div>

JS:

$scope.displayLetter = function() {
    console.log($scope.choice);
};

字母存储在分配给对象的字符数组中。该对象位于对象数组中。

$scope.images = 
    [ 
    { pics: ["img/carrion.png", "img/telefrag.png", "img/thunder-skull.png", "img/skull-ring.png"], word: 'skull', length: 5, 
    letters: ['u', randLet(), randLet(), randLet(), 's', randLet(), 'k', 'l', randLet(), randLet(), randLet(), 'l' ]}

我总是变得不确定。我该如何解决这个问题？

我什至尝试添加 ng-model

      <li ng-model="choice" ng-click="displayLetter()" class="wordList">
            {{choice}}
        </li> 

Answer 1

$scope 适用于 Controller 本身，而不适用于 ng-repeat 中的每个项目。像这样尝试一下

<div class="col-md-2 col-sm-10 col-lg-1 letters">
  <ul>
    <li ng-repeat="choice in images[num].letters track by $index" ng-click="displayLetter(choice)" class="wordList">
        {{choice}}
    </li>
</ul>
</div>
$scope.displayLetter = function(choice) {
    console.log(choice);
};

正如下面 Lex 提到的，如果您希望每个选择都是 li，那么 ng-repeat 应该在 li 上。如果数组中有 4 个元素，并且 div 中有 ng-repeat，您将得到 4 div 而不是 4 li。