如何在angularjs中使用ng-repeat時顯示特定項目中的數據？

Question

我試圖用角度js做一個測驗應用程序。 當用戶選擇正確答案時，我想在該項目內顯示一個圖標。 問題是該圖標是beign應用於列表中的每個項目。 我該如何解決這個問題？

這裏的代碼

<md-radio-group ng-model="test.selected" ng-change="test.onChange(test.selected)"> 
    <md-radio-button ng-repeat="item in test.items" value="{{item}}" class="md-accent" ng-click="test.validate($index)"> 
    {{item}} 
    <md-icon class="material-icons md-secondary right" ng-show="test.isCorrect">done</md-icon> 
    <md-icon class="material-icons md-secondary wrong" ng-show="test.isNotCorrect">clear</md-icon> 
    </md-radio-button> 
    </md-radio-group> 

這裏有一個plunker演示plunkr

Answer 1

我做你的plunker一些變化，

Changed link

(function(){ 
    angular.module('app') 
      .controller('testCtrl', ['$scope', function($scope){ 
       var vm = this; 
       vm.items = ['Dignity','Pretty','Cheap','Expensive']; 
       vm.right = 0; 
       vm.onChange = function(selected){ 
         console.log(selected); 
        } 
       vm.validate = function(index){ 
        console.log(index); 
        if(index === vm.right){ 
         vm.isCorrect = vm.items[index]; 
         vm.isNotCorrect = ""; 
        } 
        else{ 
         vm.isNotCorrect = vm.items[index]; 
         vm.isCorrect = ""; 
        } 
       } 
      }]) 
})(); 

，並鑑於

<md-icon class="material-icons md-secondary right" ng-show="test.isCorrect==item">done</md-icon> 
<md-icon class="material-icons md-secondary wrong" ng-show="test.isNotCorrect==item">clear</md-icon> 

Answer 2

一個快速的方法可能是添加以下樣式：

md-icon { 
    display: none !important; 
} 

.md-checked md-icon { 
    display: inline-block !important; 
} 

他們確保的圖標只在顯示md-checked元素。