Load from database by clicking on a link

Question

Using AngularJS functionality, I query objects (each having a 'number' field) in a database

<article class='recipe' ng-cloak ng-repeat='recipe in recipes'>
  <h2>
     <a data-ng-bind="recipe.number"></a>
  </h2>
</article>

that displays a list of 'recipe.number':

 d024b8f1-a278-401d-9fd5-a72458a42dd8
 0f647d45-607c-40a7-8dae-daea7385ea3f
 49580ae2-54ea-491a-89ad-7035a8e10e0e
 ...

Could you please advise me - how can I, by clicking on the displayed numbers, display another object's field (eg 'recipe.text')? Thank you.

Answer 1

You can do something like the following :

<article class='recipe' ng-cloak ng-repeat='recipe in recipes'>
  <h2>
    <a data-ng-bind="recipe.number" ng-click="showDetails = ! showDetails"></a>
  </h2>
  <div ng-show="showDetails">
    <p>{{recipe.text}}</p>
  </div>
</article>

When you click on the number you show the details and when you click one more time it hides the details.

Answer 2

Is this you want?

<article class='recipe' ng-cloak ng-repeat='recipe in recipes'>
  <h2>
     <a data-ng-bind="recipe.number">{{recipe.text}}</a>
  </h2>
</article>

Answer 3

Building on Lotus91's answer: If you want to show one recipe at a time:

<article class='recipe' ng-cloak ng-repeat='recipe in recipes'>
  <h2>
    <a data-ng-bind="recipe.number" ng-click="showRecipe = recipe.text"></a>
  </h2>
</article>

<div ng-if="showRecipe != ''">
  <p>{{showRecipe}}</p>
</div>

OR, if you want to show more than one at a time:

<article class='recipe' ng-cloak ng-repeat='recipe in recipes'>
  <h2>
    <a data-ng-bind="recipe.number" ng-click="recipe.showRecipe = ! recipe.showRecipe"></a>
  </h2>
  <div ng-if="recipe.showRecipe">
    {{recipe.text}}
  </div>
</article>