배열에서 속성 값을 기준으로 템플릿을 개체에 바인딩하는 방법은 무엇입니까?

Question

나는 아마도 일종의 지시어를 원할 것입니다. 맞습니까?

//JS 
$rootScope.cats = [ 
     { sort:0, value:'ABY', label:'Abyssinian' }, 
     { sort:1, value:'RGD', label:'Ragdoll' }, 
     { sort:2, value:'RBL', label:'Russian Blue' }, 
     { sort:3, value:'OCT', label:'Ocicat' } 
]; 

//HTML 

{{cats['ABY'].label}} //This obviously doesn't work. Is there something in Angular that would? 

Answer 1

봅니다 예를 들어, 컨트롤러에 적절한 개체를 찾을 수 있습니다 :

$scope.cats = [ 
{ sort: 0, value: 'ABY', label: 'Abyssinian' }, 
{ sort: 1, value: 'RGD', label: 'Ragdoll' }, 
{ sort: 2, value: 'RBL', label: 'Russian Blue' }, 
{ sort: 3, value: 'OCT', label: 'Ocicat' } 
]; 

$scope.selectedCat = _.find($scope.cats, function (cat) { 
    return cat.value == 'OCT'; 
}); 

그리고 레이아웃이 점을 넣어 :

NB Lodash 라이브러리는 적절한 고양이를 찾는 데 사용됩니다

{{selectedCat.label}} 

.

Answer 2

이 필터는 사용자 지정 필터의 후보가 될 수 있습니다. DEMO

app.filter('label', function(){ 
    return function(arr, value) { 
    var cats; 

    if(arr) { 
     cats = arr.filter(function(elem) { 
     return elem.value == value; 
     }); 
    } 

    return cats && cats.length > 0 ? 
       cats[0].label : 'Not Found'; 
    } 
});