如何在 angularjs 中使用 ng-repeat 时显示特定项目内的数据?

阿米特·辛格

我正在尝试使用 angular js 制作一个测验应用程序。当用户选择正确答案时,我想在该项目内显示一个图标。问题是图标开始应用于列表中的每个项目。我怎样才能解决这个问题。?

这是代码

   <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

尼克莱什·劳特

我对你的plunker做了一些改变,

更改链接

(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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在angularjs中使用ng-click显示ng-repeat的确切内容

AngularJS:如何在ng-repeat中使用$索引

如何在ng-repeat angularjs中使用多重响应?

如何在angularjs中使用ng-repeat

如何在 angularjs 中使用 ng-repeat 访问带方括号的项目

AngularJS:如何在 HTML 中使用两个 ng-repeat 显示深度对象值

如何在angularjs中使用ng-repeat和array时创建对象

如何在AngularJS中使用ng-repeat动态生成ng-model =“ my _ {{$ index}}”“?

使用ng-repeat时如何在angularjs中的特定行中隐藏<td>

如何在angularjs中使用angular-ui-bootstrap uib-pagination时保持ng-repeat的$ index计数

在angularjs中使用ng-repeat时如何将当前月份保持在列表顶部

在angularjs中使用ng-repeat时扩展$ index的范围

在 AngularJS ng-repeat 中使用 2 个数组的数据

如何避免使用ng-repeat重复项目并丢弃angularjs?

如何使用angularjs在ng-repeat中打印Json数据?

如何在AngularJs中使用ng-repeat过滤(键,值)?

如何在AngularJS中使用ng-repeat遍历键和值?

如何在AngularJS ng-repeat中使用ES6 Map

如何在angularjs中使用ng-repeat遍历JavaScript Maps?

如何在Angularjs中使用ng-repeat复选框过滤表

如何在AngularJs中使用ng-repeat重复重复的对象?

如何在AngularJS中使用ng-repeat插入html代码?

如何在ng-repeat中使用AngularJS实现计数器?

如何在AngularJS中使用ng-repeat创建嵌套结构

问:如何在AngularJs中使用ng-repeat onClick执行带参数的函数?

AngularJS - 如何在 ng -repeat 中显示日期

如何在Angularjs中的ng-repeat中显示单行

如何在ng-repeat angularjs中显示高图

AngularJS:如何在ng-repeat的<table>内使用<md-radio-button>