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

Update Item in List to be shown when tapped - Angular JS

本文关键字：显示 JS Angular 列表 项目 更新      更新时间：2023-09-26

我有一个显示一些项目的列表，下面是在我的控制器中生成列表的代码:

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

在上面的方法中，我能够将项目的复选标记变量设置为true，但我遇到的问题是，当项目被点击时，它是否显示正确?我如何设置复选标记的ng-show，使它在点击时显示正确?

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

感谢所有的帮助

HTML:

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

在javascript函数中:

$scope.checkSelected = function(data) {
    data.checkmark = true;
}

我认为问题出在你的语法上。试着去掉花括号。也看看这个答案

ng-show="multipleOption.checkmark"
相关文章：