在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

- me9867

---

你的 Plunker 运行不如预期，请进行调整，也许我可以帮助你。 - Waldir J. Pereira Junior

Plunker不起作用了。您的需求无法理解？请更新它。 - neha soni

嗨，Plunker只是用来展示代码的。这是应用程序的一部分，目前无法在Plunker中获得工作示例。 - me9867

Answer 1

这是如何实现的。

1. 在控制器中将数据保留为json obj数组。其中包含：选择项目名称和相关描述。

2. 在控制器中保留一个占位符，用于当前选定的选项，您可以在控制器范围内使用它来显示页面上的信息。

P.S：我已经用简单的HTML完成了它，以展示如何实现。如果有任何疑问，请评论。

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>

- Himanshu Tyagi

---

这个如何与原帖中的代码集成，我需要它能够在我的“products in products” ng-repeat旁边工作。 - me9867

你还想实现什么？据我理解，你想在下拉菜单中选择任何“小部件”时显示一个描述文本。 - Himanshu Tyagi

Answer 2

这里将会是您的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;
}

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

- Gary Holiday

Answer 3

我会创建一个 JSON 对象数组来表示类别，如下所示：

$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"}
]

我将使用这个数组来创建类别列表。

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

- Mahesh