Question

我有一个显示某些项目的列表，这是在我的控制器中生成列表的代码：

$scope.multipleOptions = [{ item: '1', checkmark:false}, { item: '2', checkmark:false},{ item: '3', checkmark:false} ];

然后在我的HTML中我有

<ion-list id="multiple-select-list" class=" ">
         <ion-item class="  " ng-repeat="multipleOption in multipleOptions track by $index" ng-click="checkSelected($index)">
                <p><b>{{multipleOption.item}}</b></p>
                <p class="button-icon ion-checkmark" ng-show="{{multipleOption.checkmark}}"></p>
        </ion-item>
</ion-list>

正如您所看到的，当列表加载时，隐藏了所有项目的复选标记，并且我有一个名为checkSelected($index)的函数，当一个项目被点击时，在该函数中我想要将复选标记设置为显示，这是我目前拥有的

$scope.checkSelected = function(modalIndex) {
        //this set the checkmark property to true
        $scope.multipleOptions[modalIndex].checkmark = true;
        //the line below does not work 
        document.getElementById("multipl-select-list").getElementsByTagName("ion-item")[modalIndex].getElementsByTagName("p")[1].show = true;
    }

在上面的方法中，我能够将项目的复选标记变量设置为ture，但我遇到的问题是在项目被点击时显示正确吗？如何设置复选标记的ng-show，以便在点击时立即显示？

修改解决方案都有效我只是想添加一些我注意到的行为，当我ng-show={{multipleOption.checkmark}}时，ng-hide类会被添加到<p>的类中，所以即使我设置了ng-show如果它仍然没有显示

感谢所有帮助

Answer 1

我认为问题在于你的语法。尝试删除大括号。另请查看this答案

ng-show="multipleOption.checkmark"

Answer 2

HTML：

BigDecimal currentNumber = new BigDecimal("0.0");

在javascript函数中：

<ion-list id="multiple-select-list" class=" ">
         <ion-item class="  " ng-repeat="multipleOption in multipleOptions track by $index" ng-click="checkSelected(multipleOption)">
                <p><b>{{multipleOption.item}}</b></p>
                <p class="button-icon ion-checkmark" ng-show="multipleOption.checkmark"></p>
        </ion-item>
</ion-list>

更新列表中的项目，以便在点击时显示 - Angular JS

2 个答案: