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適用於控制器本身，而不適用於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 。

Answer 2

我不知道我是否完全理解你的問題。

但你可以做到以下幾點：



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

    });

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

receive a parameter, that is the clicked item. 函數接收一個參數，即單擊的項目。 , when call pass the clicked item. 並且在，當呼叫傳遞被單擊的項目。

在Plunker中查看：單擊此處

AngularJS：如何在單擊時在另一個div上顯示元素

問題描述

2 個解決方案

解決方案1
2 2016-04-05 03:26:08

解決方案2
0 2016-04-05 04:43:33

AngularJS：如何在單擊時在另一個div上顯示元素

問題描述

2 個解決方案

解決方案1 2 2016-04-05 03:26:08

解決方案2 0 2016-04-05 04:43:33

解決方案1
2 2016-04-05 03:26:08

解決方案2
0 2016-04-05 04:43:33