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适用于控制器本身而非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数组中ng-repeat个div元素，那么您将获得4 div而不是4 li

Answer 2

我不知道我是否完全明白你的问题。

但你可以做到以下几点：

file.js 的



    var app = angular.module('test', []);

    app.controller('maincontroller', function($scope) {


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

      $scope.images = [{ 
        "pics": [
          "http://www.aviacaobr.com.br/wp/img.png", 
          "http://www.psf.gov.pk/images/icons/gallery.png", 
          "http://handicrafts.nic.in/dc_hc_photo_gallery.png"
        ], 
        "word": 'skull', 
        "length": 5, 
        "letters": [
          'u', 
          randLet(), 
          randLet(), 
          randLet(), 
          's', 
          randLet(), 
          'k', 
          'l', 
          randLet(), 
          randLet(), 
          randLet(), 
          'l'
        ]
      }];

      function randLet(){
        return 'a';
      }

    });

file.html 的

    <li><body ng-controller="maincontroller">

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

函数 displayLetter 接收一个参数，即被点击的项目。并且在 ng-repeat 中，当 ng-click 时，调用 displayLetter 传递单击的项目。

参见Plunker：Click Here

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

2 个答案: