点击Angular过滤列表中的函数

Click function on list filtered by Angular

本文关键字：函数 列表 Angular 过滤 点击      更新时间：2023-09-26

我有一个列表，我正在使用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>

这些信息显示在下面的段落中，上面有一个类：

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

我正在尝试将单击事件分配给显示的任何文本。它第一次起作用，如果我更改搜索，它会再起一次作用，但如果我再次更改搜索（当然会产生新的结果），它根本无法将文本识别为点击事件。我认为它没有识别更新列表中的类。我在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

单击列表中的一个项目后，我不能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

相关文章：