javascript – 在AngularJS中选择下拉项时显示概述文本

我希望显示每个窗口小部件类别的概述,以便在选择该窗口小部件类别时显示在筛选结果上方.

我假设这将需要一个ng-show指令,所以也许需要一些控制器代码.但任何关于将选择下拉列表与我的ng-repeat连接并与ng-show链接的指针都会很棒.

这是我的目标：

之前

后

<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

解决方法

这将是你的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>

这将在控制器内部

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

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

现在假设每个产品的描述都是产品对象的一部分 – 就像名称,数量和价格一样.