AngularJS：如何根据类别选择获取子类别

Question

我的问题

请如何选择特定类别的子类别？ 在这里，我可以检索所有数据，但不按类别过滤。

由于

Json Data

"data": [
 {
  "id": 1,
  "famille": "subcat1",
  "catproduit_id": 2,
  "catproduit": {
    "id": 2,
    "cat": "cat2",
  }
},
{
  "id": 2,
  "famille": "subcat2",
  "catproduit_id": 2,
  "catproduit": {
    "id": 2,
    "cat": "cat2",
  }
},
{
  "id": 3,
  "famille": "subcat3",
  "catproduit_id": 1,
  "catproduit": {
    "id": 1,
    "cat": "cat1",
  }
},
}
]

控制器

 "use strict";

 var app = angular.module('bb-laravel',['ui.select']);
 app.controller('RapportCreateCtrl',function($scope,SweetAlert,RapportService,CatproduitService,FamproduitService,$http,$rootScope,$translatePartialLoader,Notification,trans){


/*
 * Define initial value
 */
$scope.tmp = {};
$scope.rapport={};

/*
 * Create a rapport
 */
$scope.create = function(rapport) {
    $scope.isDisabled = true;
    $scope.tmp = angular.isObject(rapport) ? angular.toJson(rapport) : rapport;
    RapportService.create($scope.tmp);
};


/*
 * Get all Catproduit
 */
CatproduitService.list().then(function(data){
    $scope.catproduits = data;
});

/*
 * Get all Famproduit
 */
FamproduitService.list().then(function(data){
    $scope.famproduits = data;
});

/********************************************************
 * Event Listeners
 * Rapport event listener related to RapportCreateCtrl
 ********************************************************/

$scope.$on('rapport.create', function() {
    $scope.rapport ={};
    Notification({message: 'rapport.form.rapportAddSuccess' ,templateUrl:'app/vendors/angular-ui-notification/tpl/success.tpl.html'},'success');
    $scope.isDisabled = false;
});

//Validation error in create rapport event listener
$scope.$on('rapport.validationError', function(event,errorData) {
    Notification({message: errorData ,templateUrl:'app/vendors/angular-ui-notification/tpl/validation.tpl.html'},'warning');
    $scope.isDisabled = false;
});

});

HTML表格

我可以选择类别和子类别：

 ...
                  <div class="form-group">
                            <label>
                                Catégorie des produits
                            </label>
                            <ui-select ng-model="rapport.catproduit_id" theme="select2" style="width: 100%;">
                                <ui-select-match placeholder="Selectionner une catécorie">
                                    {{$select.selected.cat || $select.selected}}
                                </ui-select-match>
                                <ui-select-choices repeat="catproduit.id as catproduit in catproduits | propertyFilter: {cat: $select.search}">
                                    <div ng-bind-html="catproduit.cat | highlight: $select.search"></div>
                                </ui-select-choices>
                            </ui-select>
                        </div>
                        <div class="form-group">
                            <label>
                                Famille des produits
                            </label>
                            <ui-select ng-model="rapport.famproduit_id" theme="select2" style="width: 100%;">
                                <ui-select-match placeholder="Selectionner une famille des produits">
                                    {{$select.selected.famille || $select.selected}}
                                </ui-select-match>
                                <ui-select-choices repeat="famproduit.id as famproduit in famproduits | propertyFilter: {famille: $select.search}">
                                    <div ng-bind-html="famproduit.famille | highlight: $select.search"></div>
                                </ui-select-choices>
                            </ui-select>
                        </div>
     ...

Answer 1

您可以将数组数据传输到地图。地图的关键是父类别id。所以当选择父类别时，Map [selectedCategory]是子类别。