通過單擊鏈接從數據庫加載

Question

使用AngularJS功能，我可以查詢數據庫中的對象（每個對象都有一個“數字”字段）

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

顯示“ recipe.number”的列表：

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

您能否建議我-如何通過單擊顯示的數字顯示另一個對象的字段（例如'recipe.text'）？ 謝謝。

Answer 1

您可以執行以下操作：

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

當您單擊該數字時，將顯示詳細信息；當您再次單擊該數字時，它將隱藏該詳細信息。

Answer 2

這是你想要的嗎？

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

Answer 3

以Lotus91的答案為基礎：如果您想一次顯示一個食譜：

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

或者，如果您想一次顯示多個：

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