单击按 Angular 筛选的列表中的函数

Question

我有一个列表，我正在使用 Angular 根据搜索进行过滤：

<div ng-init="psykers = [{name: 'Kairos Fateweaver'},
       {name: 'Pink Horrors(10)'},
       {name: 'Pink Horrors(11-14)'},
       {name: 'Pink Horrors(15 or more)'},
       {name: 'Sorcerer (lvl 1)'},
       {name: 'Sorcerer (lvl 2)'},
       {name: 'Sorcerer (lvl 3)'}]">
</div>

此信息显示在以下段落中，上面带有 class：

<label>Begin entering a psyker's name here:
  <input id="psykerSearch" ng-model="searchText">
</label>
<p class="psykerResult" ng-repeat="psyker in psykers | filter:searchText">
  {{psyker.name}}
</p>

我正在尝试将点击事件分配给显示的任何文本。它第一次工作，如果我改变我的搜索，它会再工作一次，但是如果我再次改变我的搜索（当然会产生新的结果），它根本无法将文本识别为点击事件。我认为它没有识别更新列表的 class。我在 keyup 上有一些淡入淡出，我尝试更新一个变量以在那里识别它，但没有成功。

这是键盘代码：

var psykerResult = $('.psykerResult');

// SHOW PSYKERS BASED ON SEARCH 

$('#psykerSearch').on("change keyup paste", function() {

  psykerResult = $('.psykerResult');

  if ($(this).val() == "") {
    psykerResult.fadeOut(500);
  } else {
    psykerResult.fadeIn(500);
  }
}); // End Keyup

这就是用户点击时发生的情况。它将点击的文本与存储在数组中的信息相匹配，并将其显示在 div 中。然后它会下拉一些下拉菜单：

psykerResult.click(function() {

  // 1. disable input and hide psykers

  $('#psykerSearch').prop('disabled', true);
  psykerResult.hide();

  // 2. match psyker & display profile

  for (var i = 0; i < psykers.length; i++) {

    if (psykers[i].name == $(this).text().trim()) {

      chosenPsyker = psykers[i];

      psykerProfile += '<h2>' + chosenPsyker.name + '</h2>' + '<p>Warp Charge: ' + chosenPsyker.warpCharge + '</p>' + '<p>Mastery Level: ' + chosenPsyker.mastery + '</p>' + '<p class="notes">' + '<label for="notes">Notes: </label><textarea id="notes" rows="4" cols="50"></textarea>' + '</p>';

      $('#psykerProfiles').html(psykerProfile);
    }
  }

  // 3. display power dropdown lists

  for (var i = 0; i < chosenPsyker.power.length; i++) {
    $('#' + chosenPsyker.power[i]).fadeIn(500);
  }
}); //End psyker click

Answer 1

我不能 100% 确定您在单击列表中的一项后想要什么，但我创建了一个简单的示例，说明您可以使用更简单的 Angular 代码来做什么将演示文稿保持在 HTML 内，将逻辑（在本例中不多）保持在控制器内。

HTML

<div ng-controller="MainCtrl">
  <label>Begin entering a psyker's name here:
    <input id="psykerSearch" ng-model="searchText" ng-disabled="chosenPsyker">
  </label>
  <p class="psykerResult" ng-repeat="psyker in psykers | filter:searchText">
    <a href="#" ng-bind="psyker.name" ng-click="psykerClicked(psyker)"></a>
  </p>
  <hr>
  <h2 ng-bind="chosenPsyker.name"></h2>
  <p>Warp Charge: <span ng-bind="chosenPsyker.warpCharge"></span></p>
  <p>Mastery Level:  <span ng-bind="chosenPsyker.mastery"></span></p>
  <p class="notes">
    <label for="notes">Notes: </label>
    <textarea id="notes" rows="4" cols="50"></textarea>
  </p>
</div>

控制器

app.controller('MainCtrl', function($scope) {
  $scope.psykers = [
    {name: 'Kairos Fateweaver'       , warpCharge: 1, mastery: 11},
        {name: 'Pink Horrors(10)'        , warpCharge: 2, mastery: 12},
        {name: 'Pink Horrors(11-14)'     , warpCharge: 3, mastery: 13},
        {name: 'Pink Horrors(15 or more)', warpCharge: 4, mastery: 14},
        {name: 'Sorcerer (lvl 1)'        , warpCharge: 5, mastery: 15},
        {name: 'Sorcerer (lvl 2)'        , warpCharge: 6, mastery: 16},
        {name: 'Sorcerer (lvl 3)'        , warpCharge: 7, mastery: 17}
    ];

    $scope.psykerClicked = function(psyker) {
      $scope.chosenPsyker = psyker;
    }
});

Plunker

单击按 Angular 筛选的列表中的函数

Click function on list filtered by Angular

javascript

jquery

angularjs

ng-repeat

ng-init