相关疑难解决方法(0)

如何在ng-repeat中使用$ index来启用类并显示DIV?

我有一套<li>元素.

<ul>
  <li ng-class="{current: selected == 100}">
     <a href ng:click="selected=100">ABC</a>
  </li>
  <li ng-class="{current: selected == 101}">
     <a href ng:click="selected=101">DEF</a>
  </li>
  <li ng-class="{current: selected == $index }" 
      ng-repeat="x in [4,5,6,7]">
     <a href ng:click="selected=$index">A{{$index}}</a>
  </li>
</ul>
Run Code Online (Sandbox Code Playgroud)

当用户点击上面的某个地址元素然后它应该,设置所选的值并显示<DIV>以下元素之一:

<div  ng:show="selected == 100">100</div>
<div  ng:show="selected == 101">101</div>
<div ng-repeat="x in [4,5,6,7]" ng:show="selected == $index">{{ $index }}</div>
Run Code Online (Sandbox Code Playgroud)

这适用于前两种情况.

  • 当用户单击ABC时,第一个<DIV>显示100并将颜色更改为红色.
  • 单击DEF时,101显示,DEF变为红色.

但是它对于A0,A1,A2和A3根本不起作用

  • 当用户单击A0,A1,A2或A3然后未显示正确时,未设置所选值,并且所有ng-repeat A0,A1,A2和A3的颜色变为红色.

如果您查看此Plunker,最好显示:

http://plnkr.co/edit/7HMeObplaBkx5R0SntjY?p=preview

请注意,在顶部我已添加{{ selected }}为顶部的调试辅助工具.这x in [4,5,6,7]也只是为了模拟一个循环.在现实生活中,我有这个ng-repeat="answer in modal.data.answers".

有谁知道如何设置它,以便 …

angularjs

165
推荐指数
2
解决办法
43万
查看次数

如何在ngRepeat中突出显示所选行?

我找不到能帮助我解决Angular中这个简单问题的东西.当对位置路径进行比较时,所有答案都与导航栏相关.

我已经使用list和构建了一个动态表ngRepeat.当我单击一行时,我正在尝试为此行分配一个选定的css类,以突出显示用户已选择此行的事实,并.selected从之前突出显示的行中删除该行.

我错过了在所选行和css类赋值之间绑定的方法.

我应用于每个row(ul)ng-click="setSelected()" 但我错过了function应用更改内部的逻辑.

我的代码 - 普拉克

我的代码:

var webApp = angular.module('webApp', []);

//controllers
webApp.controller ('VotesCtrl', function ($scope, Votes) {
    $scope.votes  = Votes;
    $scope.statuses = ["Approved","Pending","Trash","Spam"];

    $scope.setSelected = function() {
       console.log("show");

    }
});

//services
webApp.factory('Votes', [function() {

    //temporary repository till integration with DB this will be translated into restful get query
    var votes = [
        {
            id: '1',
            created: 1381583344653,
            updated: '222212',
            ratingID: '3',
            rate: 5,
            ip: '198.168.0.0', …
Run Code Online (Sandbox Code Playgroud)

angularjs angularjs-ng-repeat

55
推荐指数
2
解决办法
12万
查看次数

标签 统计

angularjs ×2

angularjs-ng-repeat ×1