javascript - Click function on list filtered by Angular -
i have list i'm using angular filter, based on search:
<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>this information gets displayed in following paragraph class on it:
<label>begin entering psyker's name here: <input id="psykersearch" ng-model="searchtext"> </label> <p class="psykerresult" ng-repeat="psyker in psykers | filter:searchtext"> {{psyker.name}} </p>i trying assign click event of text shows up. works first time, , if change search, works 1 more time, if change search again (which of course generates new results), fails recognize text @ click event. think not recognizing class of updated list. have fades on keyup, , tried updating variable recognize there, no luck.
here's keyup code:
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 keyupand happens when user clicks. matches text clicked on information stored in array , displays in div. brings down drop down menus:
psykerresult.click(function() { // 1. disable input , hide psykers $('#psykersearch').prop('disabled', true); psykerresult.hide(); // 2. match psyker & display profile (var = 0; < 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 (var = 0; < chosenpsyker.power.length; i++) { $('#' + chosenpsyker.power[i]).fadein(500); } }); //end psyker click
i'm not 100% sure desire if after clicking 1 of items in list, i've created simple example of can simpler angular code keeps presentation within html , logic (not in case) within controller.
html
<div ng-controller="mainctrl"> <label>begin entering 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> controller
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; } });
Comments
Post a Comment