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訪問更多詳細信息

回答

相關問題