2016-03-23 5 views
1

これは単純でなければならず、Angularにはおそらくこれを行うためのinbuilt指示がありますが、Arrayをループせずに行う方法について考えることはできません。AngularJSのアクセスIDの照合による詳細

私はオプションの配列が

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

そして

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

すなわちカラーオプションのIDを格納し、その後、私のデータオブジェクト、つまり持っているしかし、私はしたいユーザーにデータを表示するときラベルではなく、IDを表示するので、これを行う簡単な(角)方法はあり?:

{{data.color.label}} 
+2

、それは一部のHTMLコードを配置するとよいでしょう。あなたが何をしたのかを知るために – kiro112

答えて

2

角度の方法は、あなたはまだ、本質的に配列をループするが、すべてのオプションがとして「真」にフィルタの厳密な比較を設定するループすなわち

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

のいくつかの並べ替えが必要になり、NGリピート&フィルタを使用することだろう上記だけで完全一致で

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

+0

私はこれが完璧な答えだと感じます – Thanigainathan

+0

私はng-repeatを使うとは思わなかったが、 – grasesed

0

followi ngがidが$scope.data.colorに一致するオブジェクトを返します。

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

pickedColor.labelは、ラベルの文字列になります。

+0

私のコードでこれをどのように実装するのか分かりません。 – grasesed

0

をIDを選択しますが、他の方法を見て、それはあなたを助けることを願っています。

https://jsfiddle.net/kkdvvkxk/

コントローラーの下で$filterを使用することもできます。

コントローラー:

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)}} 
関連する問題