javascript - 操作 NG-REPEAT 的第一个元素

标签 javascript jquery angularjs

我对 Angular 还很陌生,如果这是一个菜鸟问题,我很抱歉。我有一个由 ng Repeat 渲染的列表,我想修改该元素的第一次出现,该元素的特定属性设置为“Y”。

<tr ng-repeat="player in player_history" >
<td>....</td>
<td>....</td>
</tr>


player_history = [
                        {
                            "value" : "10",
                            "description" : "rooney"
                            "award" : "y"      
                        },
                        {
                                "value" : "7",
                                "description" : "di maria"
                                "award" : "N"      
                        },
                        {
                                "value" : "1",
                                "description" : "de gea"
                                "award" : "N"      
                        },

                        {
                                "value" : "16",
                                "description" : "carrick"      
                                "award" : "Y"
                        },
                    ];

因此,对于第一次出现的奖励“Y”,我想对该元素进行一些修改。例如,在表中显示结果,并让该特定条目以粗体显示。我还是个新手,所以非常感谢所有的帮助。提前非常感谢您。

PS:我也在考虑让 ng-repeat 进行渲染,然后使用 Jquery 进行修改。我一直在尝试,但到目前为止没有任何结果。再次感谢您。

最佳答案

可以有很多方法,但我在这里所做的是获取第一个 y 的索引,然后在 ng-repeat 时检查它,以用 a 标记该元素使用 ng-class 的特定类。这对我有用,

HTML:

<table ng-controller="PlayerController">
    <tr ng-repeat="player in player_history">
        <td ng-class="(player.award=='y' || player.award=='Y') && $index == firstYFound ? 'firstY' : 'restAll'">{{player.description}}</td>
    </tr> 
</table>

AngularJs:

data = [
    {
        "value": "10",
        "description": "rooney",
        "award": "N"
    },
    {
        "value": "7",
        "description": "di maria",
        "award": "N"
    },
    {
        "value": "1",
        "description": "de gea",
        "award": "N"
    },
    {
        "value": "16",
        "description": "carrick",
        "award": "Y"
    }
];

function PlayerController($scope){
    $scope.player_history = data;
    for(var i = 0; i < $scope.player_history.length; i++){
        if($scope.player_history[i].award.toLowerCase() == "y"){
            $scope.firstYFound = i;
            break;
        }
    }
}

jsFiddle

关于javascript - 操作 NG-REPEAT 的第一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28230232/

相关文章:

javascript - 将 ng-annotate 与 angular cli 一起使用

javascript - 如何在javascript中找到学位的sinh值

javascript - jQuery 自定义类语法(jQuery 选择器)

jQuery延迟启动函数

jquery - 如何在 jQuery 中访问模型属性

angularjs - 如何在 Angularjs 中显示和隐藏带有复选框状态的元素

javascript - 在 Visual Studio 2015 中获取 JavaScript 函数表达式的智能感知

javascript - 显示数据 - 控制台中的错误消息

javascript - 处理父网页中的 iFrame 事件

javascript - 使用动画 Titanium 隐藏滚动条上的导航栏