如何通过属性值将模板绑定到数组中的对象？

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