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

这一定很简单，Angular可能有一个内置的指令来做到这一点，但我不知道如何不通过数组循环。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}}

来源

2016-03-23 grasesed

这将是很好把一些HTML代码。或者你做了什么的小提琴 – kiro112

的角方式将使用NG重复&过滤器，你本质上仍然是遍历数组，但所有选择都需要某种循环即

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

的筛选严格比较设置为“真”为以上仅与精确匹配选择ID

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

来源

2016-03-23 03:14:30 sjm

我觉得这是一个完美的答案 – Thanigainathan

我不认为使用ng-repeat，我会选择使用这个选项thanx – grasesed

的followi其中ID匹配$scope.data.color纳克将返回对象：

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

pickedColor.label将标签字符串。

来源

2016-03-23 03:12:18 styke

我不知道我会如何去实现这个在我的代码？ – grasesed

看看其他的方式，希望它会帮助你。

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

来源

2016-03-23 04:15:28

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

回答

相关问题