Question

我创建了两个列表。

1）包含服务名称

2）包含分配给服务名称的产品名称

有些ID可以与分配的服务上的产品相匹配。

＆＃13;

app.controller('loadProductServicesCtrl',function($scope){
    $scope.services = [
        {"ServiceID": 1, "ServiceName": "Τηλεπικοινωνίες"},
        {"ServiceID": 2, "ServiceName": "Ενέργεια"},
        {"ServiceID": 3, "ServiceName": "Ιδιωτική Ασφάλεια Υγείας"}
    ];

    $scope.products = [
        {
            "ProductID": 9,
            "ServiceID": 1,
            "ServiceName": "Τηλεπικοινωνίες",
            "ProductName": "Business 500",
            "ProductProfit": 40,
            "ProductTooltip":""
        },
        {
            "ProductID": 10,
            "ServiceID": 2,
            "ServiceName": "Τηλεπικοινωνίες",
            "ProductName": "Business 1000",
            "ProductProfit": 50,
            "ProductTooltip": ""
        },
        { 
            "ProductID": 11,
            "ServiceID": 3,
            "ServiceName": "Τηλεπικοινωνίες",
            "ProductName": "Business W",
            "ProductProfit": 75,
            "ProductTooltip": ""
        }
    ];
});

＆＃13;

<div class="form-group">
  <label for="selectpicker" class="margin-r-5 form-label">Select Service</label>
  <select data-ng-model="myService" data-ng-options="service as service.ServiceName for service in services" class="selectpicker services">
      <option value="">Select Service</option>                
  </select> 
</div>

<div class="form-group products">
  <div class="checkbox checkbox-primary checkbox-inline" ng-repeat="x in products">
    <input type="checkbox" id="{{ x.ProductID }}" value="option1">
    <label for="{{ x.ProductID }}"> {{ x.ProductName }} </label>
  </div>
</div>

＆＃13;

我想过滤带有所选服务ID的产品。我试着在select元素上使用ng-model，但它没有用。有什么建议吗？

Answer 1

你应该做

ng-repeat="x in products|filter:{ServiceID:myService.ServiceID}"

正在运行代码段

var app = angular.module('app', []);

app.controller('loadProductServicesCtrl', function($scope) {
  $scope.services = [{
    "ServiceID": 1,
    "ServiceName": "Τηλεπικοινωνίες"
  }, {
    "ServiceID": 2,
    "ServiceName": "Ενέργεια"
  }, {
    "ServiceID": 3,
    "ServiceName": "Ιδιωτική Ασφάλεια Υγείας"
  }];
  $scope.products = [{
    "ProductID": 9,
    "ServiceID": 1,
    "ServiceName": "Τηλεπικοινωνίες",
    "ProductName": "Business 500",
    "ProductProfit": 40,
    "ProductTooltip": ""
  }, {
    "ProductID": 10,
    "ServiceID": 2,
    "ServiceName": "Τηλεπικοινωνίες",
    "ProductName": "Business 1000",
    "ProductProfit": 50,
    "ProductTooltip": ""
  }, {
    "ProductID": 11,
    "ServiceID": 3,
    "ServiceName": "Τηλεπικοινωνίες",
    "ProductName": "Business W",
    "ProductProfit": 75,
    "ProductTooltip": ""
  }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="loadProductServicesCtrl">
  <div class="form-group">
    <label for="selectpicker" class="margin-r-5 form-label">Select Service</label>
    <select data-ng-model="myService" data-ng-options="service as service.ServiceName for service in services track by service.ServiceID" class="selectpicker services">
      <option value="">Select Service</option>

    </select>
  </div>
 Selected Id : {{ myService.ServiceID}}
  <div class="form-group products" ng-repeat="x in products|filter:{ServiceID:myService.ServiceID}">
    <div class="checkbox checkbox-primary checkbox-inline">
      <input type="checkbox" id="{{ x.ProductID }}" value="option1">
      <label for="{{ x.ProductID }}">{{x.ProductName}}</label>
    </div>
  </div>
</div>

Answer 2

在ng-repeat

使用过滤器

ng-repeat="x in products | filter:{ ServiceID: myService.ServiceID }"

demo https://jsfiddle.net/vorant/m330mp3a/

获取ng-options中对象的字段值并过滤其他值

2 个答案: