AngularJS如何把 css 放在角 js 中所选行?

发布时间: 2017/4/16 21:34:27
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我在 angularjs 中创建一个 todo 列表。它几乎完成。我的问题是当我点击编辑按钮,我想要突出显示完整的行处于编辑模式下通过添加一个 css 类"黄色"......,但我也不知道如何做到这一点......

谁能告诉我和我的编码方式是对或错。请

jsfiddle 链接

http://jsfiddle.net/mcVfK/1338/

这里是我的代码

html

<div ng-app="myapp">
<div class="container" ng-controller="mainCtrl">
        <h3>Todo List</h3>
        <input type="text" class="form-control" placeholder="create your todos" ng-model="newItem">
        <p class="help-block text-center red" ng-show="!newItem && empty">*Fill the field.</p>
        <br>

        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Todo</th>
                    <th>Status</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="todoList in todoLists">
                    <td>{{$index+1}}</td>
                    <td>{{todoList.name}}</td>
                    <td>{{todoList.edit}}</td>
                    <td><a class="btn {{disabled}} pull-right" href="" ng-click="remove(todoList)">delete</a>
                        <a class="btn {{disabled}} pull-right" href="" ng-click="edit($index)">edit</a> </td>
                    </tr>
                </tbody>
            </table>


            <button type="button" class="btn btn-primary btn-lg btn-block" ng-click="add()" ng-hide="editMode">ADD</button>
            <button type="button" class="btn btn-default btn-lg btn-block" ng-click="update(newItem)" ng-show="editMode">UPDATE</button>
        </div>
</div>

我的 js 文件

var app = angular.module("myapp", []);
app.controller("mainCtrl", ["$scope", "$rootScope", function($scope, $rootScope){
    $scope.empty = false;
    $scope.editMode = false;

    $scope.todoLists = [{name : "one", edit : "false"},{name : "two", edit : "false"}];

    $scope.add = function(){
        if(!$scope.newItem == ""){
            $scope.todoLists.push({name:$scope.newItem, edit:"false"});
            $scope.newItem = "";
            $scope.empty = false;
        }else{
            $scope.empty = true;
        };
    };

    $scope.remove = function(item){
        var index = $scope.todoLists.indexOf(item);
        $scope.todoLists.splice(index, 1);
    };

    $scope.edit = function(index){
        $rootScope.ind = index;
        $scope.newItem = $scope.todoLists[$rootScope.ind].name;
        $scope.editMode = true;
        $scope.disabled = "disabled";
        $scope.todoLists[index].edit = "true";
    };

    $scope.update = function(item){
        if(!$scope.newItem == ""){  
            $scope.todoLists[$rootScope.ind].name = item;
            $scope.todoLists[$rootScope.ind].edit = "false";
            $scope.editMode = false;
            $scope.newItem = "";
            $scope.disabled = "";
        }else{
            $scope.empty = true;
        };
    };


}]);

css 文件

.yellow{
        background:yellow;
    }
    .red{
        color:red;
    }

解决方法 1:

您可以使用 ng-class 指令由 AngularJS 提供。 https://docs.angularjs.org/api/ng/directive/ngClass

变化

<tr ng-repeat="todoList in todoLists">

<tr ng-repeat="todoList in todoLists" ng-class="{yellow: editMode && $index == ind}">
官方微信
官方QQ群
31647020