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>

此信息显示在以下段落中，并附上一个类：

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

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

  <table-list
list-this="users"
list-all="users"
submit="submit(event)">
  </table-list>

<强>控制器

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

Plunker

单击Angular过滤的列表上的功能

1 个答案: