AngularJS Zugriff auf weitere Details durch passende IDs

Question

Das muss einfach sein und Angular hat wahrscheinlich eine eingebaute Direktive, aber ich kann mir nicht vorstellen, wie man ohne das Array durchgehen kann.

Ich habe eine Reihe von Optionen, dh

$scope.colors=[ 
    {id:"0",label:"blue"}, 
    {id:"1",label:"red"}, 
    {id:"2",label:"green"} 
] 

Und dann Objekt meiner Daten, die die ID einer Farboption speichert dh

$scope.data={ 
    color:"1", 
    otherproperty:"" 
} 

Aber wenn ich zeige die Daten an den Benutzer Ich mag das Etikett anstatt die ID zu zeigen, so ist es ein einfacher (Winkel-) Weg, dies zu tun ?:

{{data.color.label}} 

Answer 1

Der Winkel Weg wäre ng-repeat & Filter verwenden, Ihre nach wie vor im Wesentlichen über die Array-Looping, aber alle Optionen würde eine Art Schleife dh

<div ng-repeat="color in colors | filter:{ 'id': data.color}:true"> 
    {{ color.label }} 
</div> 

Einstellung der Filter strengen Vergleich zu ‚true‘ benötigen als oben wird nur die ID mit einer genauen Übereinstimmung wählen

https://jsfiddle.net/sjmcpherso/wztunyr5/

Answer 2

die followi ng wird das Objekt zurück, wo die ID $scope.data.color Spiele:

var pickedColor = $scope.colors.filter(function(obj) { 
    return obj.id === $scope.data.color; 
}); 

pickedColor.label wird das Label String sein.

Answer 3

Blick auf andere Art und Weise, hoffen, dass es Ihnen helfen.

https://jsfiddle.net/kkdvvkxk/.

Wir können auch $filter unter Controller verwenden.

Controller:

var myApp = angular.module('myApp', []); 

function MyCtrl($scope, $filter) { 
    $scope.colors = [{ 
    id: "0", 
    label: "blue" 
    }, { 
    id: "1", 
    label: "red" 
    }, { 
    id: "2", 
    label: "green" 
    }] 
    $scope.data = { 
    color: "1", 
    otherproperty: "" 
    } 

    $scope.getLabel = function(colorId) { 
    return $filter('filter')($scope.colors, { id: colorId }[0].label; 
    } 

} 

HTML:

{{ getLabel(data.color)}}