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

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

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

Answer 2

我会为类别创建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>

Answer 3

这就是你如何做到的。

将您的数据保存为控制器中的json obj数组。这将包含：选择项目名称和相关描述。
在控制器中为当前选择的选项保留占位符，您也可以使用它在控制器范围内显示页面上的信息。

P.S：我用简单的HTML完成了它，以展示如何实现这一目标。如有任何疑问请做评论。

＆＃13;

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."
  }];
  
  
});

＆＃13;

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

＆＃13;

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

3 个答案: