CODEWITHSUNDEEP
javascripthtmlcssangularjs
Ceri Westcott
Ceri Westcott

Reputation: 15

Conditional ng-style not being applied

I'm somewhat new to Angular and want to do conditional styling, i've looked elsewhere and tried to replication their answers for my question but i cant get it to work. I've made a To-Do list type of html page that has sub to-dos that I would like to be striked through when it is completed.

here is the main line:

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

The error i'm getting here is:

Error: [$parse:syntax]

here are the models:

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

        $scope.toDoArray = [];

and the full page:

 <!DOCTYPE html>
    <html>

    <head>
    <script data-require="[email protected]" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script data-require="[email protected]" 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>

Upvotes: 0

Views: 1149

Answers (2)

Jesus Carrasco
Jesus Carrasco

Reputation: 1354

the error is because you have a plus quote

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

Upvotes: 0

Lex
Lex

Reputation: 7194

You are trying to apply a style where you should be applying a class. Try this:

CSS:

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

HTML:

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

Upvotes: 2

Related Questions