单击按 Angular 筛选的列表中的函数
Click function on list filtered by Angular
我有一个列表,我正在使用 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
我不能 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;
}
});
我有一个列表,我正在使用 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
我不能 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;
}
});