Question

我想在<li>循环中的ng-repeat标记中的某些文字旁边添加一个复选标记图标。

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

当我将{{}}}和$index放入{{}}时，它们会打印出正确的值。而且我已经尝试过不用括号来评估selectedIndex。

我收到错误

错误：[$ parse：lexerr] Lexer Error：表达式[“$ index == selectedIndex”]中列0-0 [“]的意外下一个字符。

我见过其他人在其他地方评估这样的例子。问题是什么？是否有更好的方法在控制器内部以某种方式执行此操作？

Answer 1

试试这个

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

验证没有错。您将selectedIndex声明为变量。你应该定义为$ scope变量。所以只有这样你才会看到右边的检查图标。然后我将ng-click移动到

，这样当你点击它时，旁边会出现复选标记。如果单击复选标记，它将保持在同一位置，因为索引始终保持不变，并且您无法单击隐藏的检查

评估不适用于ng-show（）

1 个答案: