Evaluation not working in ng-show()

Question

I am trying to put a checkmark icon next to some text in a <li> tag within an ng-repeat loop.

HTML

<ul>
  <li ng-repeat="nav in tabs.nav">

     {{nav.name}}

     <i class="fa fa-check my-checked-icon"
        ng-show="$index===selectedIndex"
        ng-click="selectNav(nav.index)"></i>

 </li>
</ul>

JS

    $scope.tabs = {
        "navs":[
            {
                "name":"Lorem Ipsum",
                "index":0
            },
            {
                "name":"Adipiscing Elit",
                "index":1
            },
            {
                "name":"Ut Lbore et Dolore",
                "index":2
            }
        ]
    };

    var selectedIndex = 1;
    $scope.selectNav = function(index){
      $scope.selectedIndex = index;
    };

CSS

.my-checked-icon{
  display: none;
}

Both $index and selectedIndex print out the correct values when I put them in {{}}. And I've tried doing no braces as well as evaluating with == .

I get the error

Error: [$parse:lexerr] Lexer Error: Unexpected next character at columns 0-0 [“] in expression [“$index==selectedIndex"].

I've seen other examples of people evaluating like this elsewhere. What is the problem? Is there a better way to do this inside of the controller somehow?

Answer 1

Try this

HTML

<ul>
  <li ng-repeat="nav in tabs.navs" ng-click="selectNav(nav.index)">

     {{nav.name}}

     <i class="fa fa-check my-checked-icon"
        ng-show="$index===selectedIndex"
        ></i>
 </li>
</ul>

JS

var ncolor;
      $scope.tabs = {
        "navs":[
            {
                "name":"Lorem Ipsum",
                "index":0
            },
            {
                "name":"Adipiscing Elit",
                "index":1
            },
            {
                "name":"Ut Lbore et Dolore",
                "index":2
            }
        ]
    };

    $scope.selectedIndex = 1;
    $scope.selectNav = function(index){
      $scope.selectedIndex = index;
    };

There is nothing wrong in your validation. you were declaring selectedIndex as variable. you should define as a $scope variable. So only then you will see the check icon on the right. And I moved the ng-click to the

so that when you click it the check mark will come beside that. If you click a check mark it will stay at the same place as the index always remains the same and you cannot click the checks which are hidden