Question

这一定很简单，Angular可能有一个内置指令来执行此操作，但我不能想到如何在不通过数组循环的情况下进行操作。

我有一系列选项，即

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

然后我的数据对象存储颜色选项的id，即

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

但是当我向用户显示数据时我想显示标签而不是id，那么有一种简单（有角度）的方法吗？：

{{data.color.label}}

Answer 1

Angular方式将使用ng-repeat＆amp;过滤器，你仍然基本上循环数组，但所有选项都需要某种循环，即

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

如上所述将过滤器严格比较设置为'true'只会选择具有完全匹配的ID

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

Answer 2

以下内容将返回id与$scope.data.color匹配的对象：

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

pickedColor.label将成为标签字符串。

Answer 3

看看其他方式，希望它能帮到你。

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

AngularJS通过匹配id访问更多详细信息

3 个答案: