如何通過屬性值將模板綁定到數組中的對象？

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'; 
}); 

，並把這個變成你的佈局：

{{selectedCat.label}} 

NB Lodash庫用來找到合適的貓。

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'; 
    } 
});