特定のキーを選択してからng-repeatを指定しないで特定の値を表示

Question

私は角度を使用していますが、キーに基づいてキーと値のペアから値を表示しようとしています。私はこれにng-repeatを使って解決策を見てきましたが、それは乱雑です。コントローラーロジックを含まないより良いソリューションはありますか？

など。

は、私は配列にIDと名前の果物を持って言う：

$scope.fruits = [ 
{id:1, name:"apple"}, 
{id:2, name:"banana"}, 
{id:3, name:"cherry"} 
]; 

$scope.fruit_selection = 3; 

次に私の見解で、私はHTMLで

<a>{{some logic that shows cherry}}</a> 

Answer 1

$scope.pickFruitById = function() { 
    $scope.fruits.forEach(function(element){ 
    if(element.id == $scope.fruit_selection) { 
     $scope.fruitToBeDisplayed = element.name; 
    } 
}); 
} 
$scope.pickFruitById(); 

を見てみたいと思います：

<a>{{fruitToBeDisplayed}}</a> 

pickFruitByIdは、 ID fruit_selectionと果物CKと$scope.fruitToBeDisplayedにそれを割り当てます。あなたは、私は機能のロジックを置く理由があれば$scope.fruit_selection変更は、あなたがHTMLからこの関数を呼び出すことができるということです{{}}表記を使用してHTMLから

にアクセスすることができます新しいfruitToBeDisplayedを取得します。

Answer 2

demoを見てください。コード/ロジックはいくらか少なくなります。

以下のコードを見つけてください：

HTML：

<div ng-app="app" ng-controller="test"> 
    <span ng-repeat="item in fruits"> 
     <a ng-if="item.id == fruit_selection"> 
     {{item. name}} 
     </a> 
    </span> 
</div> 

JS：

var app = angular.module("app", []); 

    app.controller ('test', function($scope) { 
     $scope.fruits = [ 
     {id:1, name:"apple"}, 
     {id:2, name:"banana"}, 
     {id:3, name:"cherry"} 
     ]; 
     $scope.fruit_selection = 3; 
    });