2016-08-09 22 views
-1
<select ng-model="Category.CategoryId" ng-options="template.CategoryId as template.CategoryName for template in Adminsubcat"> 
       <option value="" selected="selected">Select a Category</option> 
       <option ng-repeat="j in template.Adminsubcat">{{j.CategoryName}}</option> 
      </select> 

meine Daten in jsonist es möglich, multileval Mehrfachauswahl-Menü Winkel wählen

"GetadminClassifiedCategoryListResult": 
[ 
    { 
     "AddedBy": 0, 
     "AddedOn": null, 
     "CategoryIcon": "icon-library_books", 
     "CategoryId": 221, 
     "CategoryName": "FBVGSDFBDFBDF", 
     "ClassifiedSubCategory": 
     [ 
      { 
       "AddedBy": 0, 
       "AddedOn": null, 
       "CategoryIcon": "", 
       "CategoryId": 238, 
       "CategoryName": "zcvb", 
       "DeletedBy": 0, 
       "DeletedOn": null, 
       "IsActive": false, 
       "ModifiedBy": 0, 
       "ModifiedOn": null, 
       "ParentCategoryId": 221 
      }, 
      { 
       "AddedBy": 0, 
       "AddedOn": null, 
       "CategoryIcon": "", 
       "CategoryId": 237, 
       "CategoryName": "poiyu", 
       "DeletedBy": 0, 
       "DeletedOn": null, 
       "IsActive": false, 
       "ModifiedBy": 0, 
       "ModifiedOn": null, 
       "ParentCategoryId": 221 
      }, 
      { 
       "AddedBy": 0, 
       "AddedOn": null, 
       "CategoryIcon": "", 
       "CategoryId": 236, 
       "CategoryName": "oi", 
       "DeletedBy": 0, 
       "DeletedOn": null, 
       "IsActive": false, 
       "ModifiedBy": 0, 
       "ModifiedOn": null, 
       "ParentCategoryId": 221 
      }, 
      { 
       "AddedBy": 0, 
       "AddedOn": null, 
       "CategoryIcon": "", 
       "CategoryId": 235, 
       "CategoryName": "uy", 
       "DeletedBy": 0, 
       "DeletedOn": null, 
       "IsActive": false, 
       "ModifiedBy": 0, 
       "ModifiedOn": null, 
       "ParentCategoryId": 221 
      }, 
      { 
       "AddedBy": 0, 
       "AddedOn": null, 
       "CategoryIcon": "", 
       "CategoryId": 234, 
       "CategoryName": "tr", 
       "DeletedBy": 0, 
       "DeletedOn": null, 
       "IsActive": false, 
       "ModifiedBy": 0, 
       "ModifiedOn": null, 
       "ParentCategoryId": 221 
      }, 
      { 
       "AddedBy": 0, 
       "AddedOn": null, 
       "CategoryIcon": "", 
       "CategoryId": 233, 
       "CategoryName": "hjjjhjghjhgjghjhgjgjghhgjghj", 
       "DeletedBy": 0, 
       "DeletedOn": null, 
       "IsActive": false, 
       "ModifiedBy": 0, 
       "ModifiedOn": null, 
       "ParentCategoryId": 221 
      }, 
      { 
       "AddedBy": 0, 
       "AddedOn": null, 
       "CategoryIcon": "", 
       "CategoryId": 232, 
       "CategoryName": "fghgfhgfhgfhgfhgfhgf", 
       "DeletedBy": 0, 
       "DeletedOn": null, 
       "IsActive": false, 
       "ModifiedBy": 0, 
       "ModifiedOn": null, 
       "ParentCategoryId": 221 
      }, 
      { 
       "AddedBy": 0, 
       "AddedOn": null, 
       "CategoryIcon": "", 
       "CategoryId": 231, 
       "CategoryName": "trfhgfhgfhgfhgfhgfhgf", 
       "DeletedBy": 0, 
       "DeletedOn": null, 
       "IsActive": false, 
       "ModifiedBy": 0, 
       "ModifiedOn": null, 
       "ParentCategoryId": 221 
      }, 
      { 
       "AddedBy": 0, 
       "AddedOn": null, 
       "CategoryIcon": "", 
       "CategoryId": 230, 
       "CategoryName": "gfhfhgfhgfhgfh", 
       "DeletedBy": 0, 
       "DeletedOn": null, 
       "IsActive": false, 
       "ModifiedBy": 0, 
       "ModifiedOn": null, 
       "ParentCategoryId": 221 
      }, 
      { 
       "AddedBy": 0, 
       "AddedOn": null, 
       "CategoryIcon": "", 
       "CategoryId": 229, 
       "CategoryName": "fdgdfgdgdfgdfgdfgdf", 
       "DeletedBy": 0, 
       "DeletedOn": null, 
       "IsActive": false, 
       "ModifiedBy": 0, 
       "ModifiedOn": null, 
       "ParentCategoryId": 221 
      }, 
      { 
       "AddedBy": 0, 
       "AddedOn": null, 
       "CategoryIcon": "", 
       "CategoryId": 228, 
       "CategoryName": "sdfgsdgdf", 
       "DeletedBy": 0, 
       "DeletedOn": null, 
       "IsActive": false, 
       "ModifiedBy": 0, 
       "ModifiedOn": null, 
       "ParentCategoryId": 221 
      }, 
      { 
       "AddedBy": 0, 
       "AddedOn": null, 
       "CategoryIcon": "", 
       "CategoryId": 227, 
       "CategoryName": "dsgsdfgsdgsdg", 
       "DeletedBy": 0, 
       "DeletedOn": null, 
       "IsActive": false, 
       "ModifiedBy": 0, 
       "ModifiedOn": null, 
       "ParentCategoryId": 221 
      }, 
      { 
       "AddedBy": 0, 
       "AddedOn": null, 
       "CategoryIcon": "", 
       "CategoryId": 223, 
       "CategoryName": "fhhhhhhhhhhgfhgf", 
       "DeletedBy": 0, 
       "DeletedOn": null, 
       "IsActive": false, 
       "ModifiedBy": 0, 
       "ModifiedOn": null, 
       "ParentCategoryId": 221 
      }, 
      { 
       "AddedBy": 0, 
       "AddedOn": null, 
       "CategoryIcon": "", 
       "CategoryId": 222, 
       "CategoryName": "dfhfdhdfhdfhdf", 
       "DeletedBy": 0, 
       "DeletedOn": null, 
       "IsActive": false, 
       "ModifiedBy": 0, 
       "ModifiedOn": null, 
       "ParentCategoryId": 221 
      } 
     ], 
     "DeletedBy": 0, 
     "DeletedOn": null, 
     "IsActive": false, 
     "ModifiedBy": 0, 
     "ModifiedOn": null, 
     "ParentCategoryId": 0 
    }, 

in json Daten ClassifiedSubCategory hat Liste von Unter category.i darstellen möchten, Multi-Level-Drop-Down-Design mit multiselct möglich options.is mit eckigen wählen oder ich muss ul li verwenden. schlagen Sie js avavilable vor. Es ist möglich mit ng-repeat start. hat es

Kategorie

  • Subkategorie

  • Subkategorie

Antwort

1

Sie zwei Baumstruktur Auswahlboxen zur Auswahl von Kategorie und Unterkategorie haben. Ich habe einen einfacheren JSON verwendet, um das Konzept zu erklären.

angular.module('my-app', []) 
    .controller('testCtrl', function($scope) { 

    $scope.categories = [{ 
     "CategoryId": 1, 
     "CategoryName": "Category A", 
     "subCategories": [{ 
      "CategoryId": 101, 
      "CategoryName": "Sub-Category A1" 
     }, { 
      "CategoryId": 102, 
      "CategoryName": "Sub-Category A2" 
     } 

     ] 
    }, { 
     "CategoryId": 2, 
     "CategoryName": "Category B", 
     "subCategories": [{ 
      "CategoryId": 201, 
      "CategoryName": "Sub-Category B1" 
     }, { 
      "CategoryId": 202, 
      "CategoryName": "Sub-Category B2" 
     } 

     ] 
    }] 

    }); 

HTML:

<div ng-app="my-app"> 
<div ng-controller="testCtrl"> 
    Category: 
    <select ng-model="Category" ng-options="template as template.CategoryName for template in categories"> 
    </select> 
    Sub Category: 
    <select ng-model="SubCategory" ng-options="template as template.CategoryName for template in Category.subCategories"> 
    </select> 
    <p> 
    Selected Category: {{Category.CategoryId}} 
    <br /> Selected Sub Category: {{SubCategory.CategoryId}} 
    <br /> 
    </p> 
</div> 

+0

kann es mit einer Auswahl möglich sein. –

+0

@VaibhavSave Nein. Sie benötigen zwei Auswahlmöglichkeiten. Der einzige Weg, um es in einer Auswahl zu haben, ist die Verwendung von Opt-Gruppen, und das klingt nicht wie Sie wollen. Es sei denn, Sie finden ein Drittanbieter-Plugin. – Chewtoy

0

Tks Jungs für alle Ihre help.I haben versucht, etwas Thav geben Sie mir alle Kategorie und subcategory.i denke ich CSS anwenden können wie Multi-Level-Menü aussehen .

<select ng-model="Category.CategoryId"> 
       <option value="" selected="selected">Select a Category</option> 
       <option ng-repeat-start="m in Adminsubcat" >{{m.CategoryName}}</option> 
       <option ng-repeat="j in m.ClassifiedSubCategory" ng-repeat-end>{{j.CategoryName}}</option> 
       @* <option ng-repeat-end></option>*@ 
      </select>