2016-04-21 6 views
1

Ich verwende AngularJS wählen ui und ich möchte mehr wählen als ein items.My Code wie dieseAngular ui Mehrfachauswahl nur gewünschte Eigenschaft Bindung

ist
$scope.user.SelectedCategories 
$scope.Categories= [ 
{ value: 'Reading', name: 'Reading Books',Id : 4 }, 
{ value: 'Sports', name: 'Physical Activity',Id : 9 }, 
{ value: 'Movies', name: 'Entertainment',Id : 7 }, 
{ value: 'Video Games', name: 'Passion',Id : 11 } 
]; 

<div class="input-group"> 
      <ui-select multiple ng-model="user.SelectedCategories" theme="bootstrap" sortable="true" close-on-select="false" style="width: 350px;"> 
       <ui-select-match placeholder="Select Categories...">{{$item.Value}}</ui-select-match> 
       <ui-select-choices repeat="category in Categories"> 
        {{category.Value}} 
       </ui-select-choices> 
     </div> 

Gerade jetzt SelectedCategories das ganze Objekt enthält, die ausgewählt wird, aber Ich möchte nur die Id-Eigenschaft des ausgewählten Objekts auswählen. Mein gewünschtes Ergebnis ist

SelectedCategories = [4,9,11]

aber es ist

SelectedCategories = [{Wert: 'Lesen, Name:' Lesebuch‘, Id: 4}, {Wert: 'Filme', Name: 'Entertainment', Id: 7}]

+0

Versuchen 'repeat = "Kategorie in Kategorien"' auf 'repeat = "Kategorie als category.Id für die Kategorie in Kategorien"' Ändern –

+0

dies auf einen Fehler gibt. Erwarteter Ausdruck in Form von '_item_ in _collection_ [track by _id_]' aber bekam Kategorie als Kategorie.Id für Kategorie in den Kategorien – sqlcte

+0

Sorry, es sollte 'ng-repeat = "category.Id als Kategorie in Categories sein" (Etwas ähnliches arbeitet für mich) –

Antwort

2

Verwendung wie

<ui-select-choices repeat="category.Id as category in Categories">{{category.Value}} 
</ui-select-choices> 
+0

Es funktionierte wie ein Charme. Vielen Shaishab Roy und Alon Eitan. – sqlcte

+0

Wie kann ich ausgewählte Kategorien anzeigen, die beim erneuten Laden der Seite ausgewählt wurden? Ausgewählte Kategorien werden in der Datenbank gespeichert und beim erneuten Laden der Seite sind sie auf der Clientseite verfügbar, aber wie kann ich sie als ausgewählt anzeigen? – sqlcte

+0

siehe diesen Link http://plnkr.co/edit/fk9wTOVR6MgOI2VcU5oU?p=preview –

0

angular.module("app", ['ui.select']).controller('ctrl', function($scope) { 
 
    $scope.user = {}; 
 
    $scope.user.SelectedCategories=[]; 
 
    $scope.Categories = [{ 
 
    value: 'Reading', 
 
    name: 'Reading Books', 
 
    Id: 4 
 
    }, { 
 
    value: 'Sports', 
 
    name: 'Physical Activity', 
 
    Id: 9 
 
    }, { 
 
    value: 'Movies', 
 
    name: 'Entertainment', 
 
    Id: 7 
 
    }, { 
 
    value: 'Video Games', 
 
    name: 'Passion', 
 
    Id: 11 
 
    }]; 
 

 
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.16.1/select.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.16.1/select.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
    {{user}} 
 
    <div class="input-group"> 
 
    <ui-select multiple ng-model="user.SelectedCategories" theme="bootstrap" sortable="true" close-on-select="false" style="width: 350px;"> 
 
     <ui-select-match placeholder="Select Categories...">{{$item.Value}}</ui-select-match> 
 
     <ui-select-choices repeat="category.Id as category in Categories" value="category.Id"> 
 
     {{category.value}} 
 
     </ui-select-choices> 
 
    </div> 
 
</div>

Verwandte Themen