javascript - 如何在 Ionic Framework 的操作表中使选项标签成为条件？

Question

我希望 Ionic 操作表中的选项能够根据条件更改文本。具体来说，我希望选项在列表项未标记时读取“Flag”($scope.flag = false)，如果列表项已标记则读取“Unflag”($scope.flag = true)。

现在，我的文本标签为:

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

但是它不起作用。相反，我看到的只是这两种选择。有谁知道如何解决这一问题？我的完整代码如下 codepen .

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

Answer 1

对于 Ionic 的当前版本(2+)，您可以使用 *ngIf 来完成此操作。要解决标记/取消标记问题，您可以执行以下操作:

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

您可以用按钮等替换 ionic 标签。