如何在Ionic framework的动作表单中设置条件选项标签?

How do I make option labels conditional in Ionic Framework's action sheets?

本文关键字:设置 条件 选项 标签 表单 Ionic framework      更新时间:2023-09-26

我希望Ionic动作表中的选项根据条件更改文本。具体来说,如果列表项未标记($scope),我希望选项读取"Flag"。flag = false),如果标记了,则为"Unflag"($scope。Flag = true).

现在,我的文本标签是:

<div ng-show="flag">Flag</div> <div ng-show="!flag">Unflag</div>

但是它不起作用。相反,我看到的只有两种选择。有人知道怎么解决这个问题吗?我的完整代码在下面,在这个代码中。

HTML:

<ion-content>
   <ion-list>
       <ion-item on-hold="showActionSheet()">
       Item 1
       </ion-item>      
   </ion-list>
</ion-content>
JAVASCRIPT:

angular.module('ionicApp', ['ionic']).controller('MyCtrl', function($scope, $timeout, $ionicActionSheet, $ionicListDelegate) {
    $scope.flag = true;
    $scope.showActionSheet = function() {
    // Show the action sheet
    var hideSheet = $ionicActionSheet.show({
        buttons: [
        { text: '<div ng-show="flag">Flag</div><div ng-show="!flag">Unflag</div>' },
        ],
        titleText: 'Action Sheet',
        cancelText: 'Cancel',
        cancel: function() {
         // add cancel code..
        },
        buttonClicked: function(index) {
            $scope.flag = !$scope.flag ;  
            return true;
        }
    });
  };
});

对于Ionic的当前版本(2+),您可以使用*ngIf来完成此操作。要解决标记/不标记问题,您可以这样做:

<ion-label *ngIf="flag">Flag</ion-label>
<ion-label *ngIf="!flag">Unflag</ion-label>

可以用button等代替ion-label