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

Question

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

我假设这将需要一个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

Answer 1

这将是你的 ng-repeat

\n\n

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

\n\n

这将在控制器内部

\n\n

// description initialized to nothing \n$scope.description = \'\';\n\n$scope.showDescription = function(product) {\n  $scope.description = product.description;\n}\n

\n\n

现在假设每个产品的描述是产品对象的一部分 - 就像名称、数量和价格一样。

\n