AngularJS - Wie man den Schlüsselwert anhand der Dropdown-Optionen ändert

Question

Ich drücke Schlüssel auf ein Array und ich wiederhole es, um Optionen im Dropdown-Menü zu erhalten. Beim Erstellen eines (Schlüssel-, Wert-) Paares sind Schlüssel im Array und Optionen identisch. Wenn wir die Option in Dropdown ändern, sollte der entsprechende Wert in HTML gerendert werden.

Hier ist der Code:

$scope.viewItemKeys = [pencils, pens, books]; 
 

 
$scope.viewItemObj = { 
 
    "pencils": { 
 
     "0": {}, 
 
     "1": {}, 
 
     "2": {} 
 
    }, 
 
    "pens": { 
 
     "0": {}, 
 
     "1": {}, 
 
     "2": {}, 
 
     "3": {}, 
 
     "4": {} 
 
    }, 
 
    "5": {}, 
 
    "6": {}, 
 
    "7": {} 
 
    }, 
 
    "books": { 
 
    "0": {}, 
 
    "1": {}, 
 
    "2": {}, 
 
    "3": {}, 
 
    "4": {} 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<select id="selId" ng-options="key as value for (key , value) in viewItemkeys" ng-model="selectedItem" ng-change='onItemChange()'></select>

helfen Sie mir bitte, wenn ich Stifte in Bezug auf Schlüssel (dh 1 bis 7, innerhalb Stifte) wählen I {} Wert zu machen brauchen

Answer 1

Werfen Sie einen Blick auf diese Fiedler here

Ihre viewItemObj ist ein wenig falsch

$scope.viewItemObj = { 
"pencils": { 
    "0": {}, 
    "1": {}, 
    "2": {} 
}, 
"pens": { 
    "0": {}, 
    "1": {}, 
    "2": {}, 
    "3": {}, 
    "4": {}, 
    "5": {}, 
    "6": {}, 
    "7": {} 
}, 
"books": { 
    "0": {}, 
    "1": {}, 
    "2": {}, 
    "3": {}, 
    "4": {} 
} 

};

Dort gab es ein extra '}'. Ich habe den HTML modifiziert

<select id="selId" ng-options="value as key for (key , value) in viewItemObj" ng-model="selectedItem" ng-change='onItemChange()'></select><br/> 
    Selected Item - {{selectedItem | json}} 

folgt diesem den Wert des Schlüssels übertragen wird, die Sie auswählen.
Lassen Sie mich wissen, wenn dies das ist, was Sie suchen.

EDIT
Basierend auf Ihre Kommentare Ich habe eine neue Geige für Sie here erstellt. Diese neue Geige zeigt die Werte des ausgewählten Objekts an. Ich habe das HTML ein wenig geändert:

<div ng-controller="MyCtrl"> 
    <select id="selId" ng-options="value as key for (key , value) in viewItemObj" ng-model="selectedItem" ng-change='onItemChange()'></select> 
    <div ng-repeat="item in selectedItem"> 
    {{item.Name}} 
    </div> 
</div> 

Ich habe auch einige Dummy-Daten in Ihrem Objekt hinzugefügt sollte

$scope.viewItemObj = { 
    "pencils": { 
     "0": { 
     Name: "Camel" 
     }, 
     "1": { 
     Name: "Nataraj" 
     }, 
     "2": { 
     Name: "Space" 
     } 
    }, 
    "pens": { 
     "0": { 
     Name: "Camel" 
     }, 
     "1": { 
     Name: "Parker" 
     }, 
     "2": { 
     Name: "Fountain" 
     }, 
     "3": { 
     Name: "Dealer" 
     }, 
     "4": { 
     Name: "Gel" 
     }, 
     "5": { 
     Name: "Inker" 
     }, 
     "6": { 
     Name: "Mountain View" 
     }, 
     "7": { 
     Name: "Decor" 
     } 
    }, 
    "books": { 
     "0": { 
     Name: "The Da Vinci Code" 
     }, 
     "1": { 
     Name: "How to kill a Mocking Bird" 
     }, 
     "2": { 
     Name: "Tooth and Nails" 
     }, 
     "3": { 
     Name: "A song of Ice and Fire" 
     }, 
     "4": { 
     Name: "Dance with the Dragons" 
     } 
    } 
    };