Display overview text when dropdown item is selected in AngularJS

Question

I am looking to display an overview of each widget category to appear above the filtered results when that widget category is selected.

I am assuming this will require a ng-show directive so will perhaps require some controller code too. But any pointers on linking up select dropdown with my ng-repeat and linking up with ng-show would be great.

Here is what I am aiming for:

Before

After

    <ion-view title="Select Box Filter" id="page6" class=" ">
            <ion-content padding="true" class="has-header">
                <ion-list id="tListSelectFilter-list11" class=" ">
                    <label class="item item-select " id="tListSelectFilter-select1">
                        <span class="input-label">Select</span>
                        <select></select>
                    </label>
                    <ion-item id="tListSelectFilter-list-item25" class="  ">Widget Range 1</ion-item>
                    <ion-item id="tListSelectFilter-list-item26" class="  ">Widget Range 2</ion-item>
                    <ion-item id="tListSelectFilter-list-item27" class="  ">Widget Range 3</ion-item>
                </ion-list>
                <ion-item ng-repeat="product in products | filter:select" class="item-thumbnail-left item-text-wrap"
                  href="#/tab/list/{{product.item}}">
                    <h2>Product Name: {{product.name}}</h2>
                    <h3>Quantity: {{product.quantity}}</h3>
                    <h2>Price: £{{product.price}}</h2>
                  </ion-item>
            </ion-content>
        </ion-view>


        <!--Widget Range 1 Overview Text - Here is an example of the overview text for Widget Range 1 to be produced when this specific dropdown is selected.
        Widget Range 2 Overview Text - Here is an example of the overview text for Widget Range 2 to be produced when this specific dropdown is selected.
        Widget Range 3 Overview Text - Here is an example of the overview text for Widget Range 3 to be produced when this specific dropdown is selected.-->

https://plnkr.co/edit/0WrinKY2X7Ijq32hBzms

Linchpin

Your Plunker is not running as expected. Please adjust it and maybe I can help you. – Lithography

plunker is not working. Not able to understand your requirement? Please update it. – Doorway

Hi, the plunker is there just to present the code. This is part of an app so not able to get a working example in a Plunker at present. – Linchpin

Answer 1

Here would be your ng-repeat

<span>{{description}}</span>
<ion-item ng-repeat="product in products | filter:select" 
 class="item-thumbnail-left item-text-wrap" ng-click="showDescription(product)" >
  <h2>Product Name: {{product.name}}</h2>
  <h3>Quantity: {{product.quantity}}</h3>
  <h2>Price: £{{product.price}}</h2>
</ion-item>

This would be inside the controller

// description initialized to nothing 
$scope.description = '';

$scope.showDescription = function(product) {
  $scope.description = product.description;
}

Now this assumes that the description for each product is apart of the product object - just as the name, quantity, and price.

Suppletory

Answer 2

I would create json object array for categories as

$scope.categories = [
    {"name":"Category 1", "description": "This is description of category1"}
    {"name":"Category 2", "description": "This is description of category2"}
    {"name":"Category 3", "description": "This is description of category1"}
]

I will bing this array to create the category list.

<ion-list id="tListSelectFilter-list11" class=" ">
    <label class="item item-select " id="tListSelectFilter-select1">
        <span class="input-label">Select</span>
        <select></select>
    </label>
    <ion-item id="tListSelectFilter-list-item25" class="  " ng-repeat="c in categories" ng-model="selected.category">
        {{c.name}}
    </ion-item>
</ion-list>
<span>{{selected.category.description || ""}}</span>

Bathhouse

Answer 3

This is how you can do it.

1. Keep your data as json obj array in controller. This will contain : Select item names and related descriptions.

2. Keep a place holder in controller for the currently selected option, you can use this too display the information on your page within the controller scope.

P.S : I have done it in simple HTML to show how this can be achieved. In case of any doubts do comment.

var app = angular.module("MyApp", []);

app.controller("MyCtrl", function() {
  this.selected = "";
  this.data = [{
    "name": "Widget 1",
    "desc": "Here is an example of the overview text for Widget Range 1 to be produced when this specific dropdown is selected."
  }, {
    "name": "Widget 2",
    "desc": "Here is an example of the overview text for Widget Range 2 to be produced when this specific dropdown is selected."
  }, {
    "name": "Widget 3",
    "desc": "Here is an example of the overview text for Widget Range 3 to be produced when this specific dropdown is selected."
  }];
  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">

  <div ng-controller="MyCtrl as ctrl">
    <select ng-model="ctrl.selected" ng-options="widget.name for widget in ctrl.data">
      <option value="">Please select</option>
    </select>
    <div>{{ctrl.selected.desc}}</div>
    <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </div>
</div>

Stronghold

How would this integrate with the code in the original post, I need this to work alongside my "product in products" ng-repeat – Linchpin

What else do you want to achieve? As far as I understood your question, you wanted to show a description text whenever any widget is selected in drop-down. – Stronghold