Ad

Click Function On List Filtered By Angular

I have a list that I'm using Angular to filter, based on a 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 the following paragraph with a class on it:

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

I am trying to assign a click event to any of the text that shows up. It works the first time, and if I change my search, it works one more time, but then if I change my search again (which of course generates new results), it fails to recognize the text at all as a click event. I think it is not recognizing the class of the updated list. I have some fades on keyup, and I tried updating a variable to recognize it there, but to no luck.

Here's the 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 Keyup

And This is what happens when a user clicks. It matches the text clicked on with information stored in an array and displays it in a div. Then it brings down some drop down menus:

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

Ad

Answer

I'm not 100% sure what your desire if for after clicking one of the items in the list, but I've created a simple example of what you can do with much simpler Angular code that keeps the presentation within the HTML and logic (not much in this case) within the controller.

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 target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" 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;
    }
});

Plunker

Ad
source: stackoverflow.com
Ad