Question

我对Angular有点新，想要做有条件的样式，我已经看过其他地方，并尝试复制他们的问题的答案，但我不能让它工作。我已经制作了一个待办事项列表类型的html页面，该页面具有子待办事项，我希望在完成后可以查看。

这是主线：

<p ng-class="''toDoArray[$parent.$index].subItemVal.completed === 'true' && {'text-decoration': 'line-through'}">{{subItem}}</p>

我到这里的错误是：

Error: [$parse:syntax]

以下是模型：

   app.controller('myCtrl',
    function($scope) {
        $scope.toDo = {};
        $scope.toDo.value = "";
        $scope.toDo.subItem = [];
        $scope.toDo.subItemVal = "";
        $scope.toDo.subItemVal.completed = false;

        $scope.toDoArray = [];

和整页：

 <!DOCTYPE html>
    <html>

    <head>
    <script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
</head>

    <body ng-app="myApp" ng-controller="myCtrl">
    <form>
    <div class="input-group">
        <input type="text" class="form-control" id="toDoItem" placeholder="Enter your To-Do" ng-model="toDo.value" />
        <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="addToDo()">Add To Do</button>
        </span>
    </div>
</form>
    <ul class="list-group">
    <li class="list-group-item" style="margin-top: 5px;" ng-repeat="x in toDoArray track by $index">
        <div class="btn-group">
            <p>{{x.value}}</p>
            <span ng-click="removeToDo($index)" class="glyphicon glyphicon-minus-sign"></span>
            <span ng-click="showSubItem($index)"class="glyphicon glyphicon-plus-sign"></span>
        </div>
        <ul>
            <li class="list-group-item" style="margin-top: 5px;" ng-repeat="subItem in x.subItem track by $index">
                <p ng-class="''toDoArray[$parent.$index].subItemVal.completed === 'true' && {'text-decoration': 'line-through'}">{{subItem}}</p>
                <span ng-click="removeSubItem($parent.$index, $index)" class="glyphicon glyphicon-remove"></span>
                <span ng-click="completed($parent.$index)" class="glyphicon glyphicon-ok"></span>
            </li>
        </ul>
        <div id="subItemPanel{{$index}}" style="margin-top: 5px;" hidden="">
            <label for="subitem">SubItem: </label>
            <span class="input-group">
                <input type="text" id="subitem" class="form-control" ng-model="x.subItemVal"/>
                <div class="input-group-btn">
                    <button class="btn btn-default" ng-click="addSubItem($index)" type="button">Add SubItem!</button>
                </div>
            </span>
        </div>
    </li>
</ul>
</body>

</html>
<script>
    var app = angular.module('myApp', []);

    app.controller('myCtrl',
        function($scope) {
            $scope.toDo = {};
            $scope.toDo.value = "";
            $scope.toDo.subItem = [];
            $scope.toDo.subItemVal = "";
            $scope.toDo.subItemVal.completed = false;

            $scope.toDoArray = [];

            $scope.completed = function(toDoIndex) {

                $scope.toDoArray[toDoIndex].subItemVal.completed = true;
            }

            $scope.removeSubItem = function (toDoIndex, toDoSubItemIdex) {

                $scope.toDoArray[toDoIndex].subItem.splice(toDoSubItemIdex, 1);
            }

            $scope.showSubItem = function(toDoIndex) {
                $("#subItemPanel" + toDoIndex).show();
            }

            $scope.addSubItem = function(toDoIndex) {
                $scope.toDoArray[toDoIndex].subItem.push($scope.toDoArray[toDoIndex].subItemVal);
                $scope.toDoArray[toDoIndex].subItemVal = "";
                debugger;
                $("#subItemPanel" + toDoIndex).hide();
            }

            $scope.removeToDo = function(toDoItem) {
                $scope.toDoArray.splice(toDoItem, 1);
            }

            $scope.addToDo = function() {
                $scope.toDoArray.push($scope.toDo);
                $scope.toDo = {};
                $scope.toDo.value = "";
                $scope.toDo.subItem = [];
                $scope.toDo.subItemVal = "";
            }
        });
</script>

Answer 1

您正在尝试应用应该应用课程的样式。试试这个：

CSS：

.todo-complete {
    text-decoration: line-through;
}

HTML：

<p ng-class="{'todo-complete': toDoArray[$parent.$index].subItemVal.completed === 'true'}">{{subItem}}</p>

Answer 2

错误是因为你有一个加号

<p ng-class="''toDoArray[$parent.$index].subItemVal.completed === 'true' && {'text-decoration': 'line-through'}">{{subItem}}</p>

change to 
<p ng-class="'toDoArray[$parent.$index].subItemVal.completed === 'true' && {'text-decoration': 'line-through'}">{{subItem}}</p>

没有应用条件ng样式

2 个答案: