Ionic 离子弹出式单选按钮

gev0vcfq  于 2022-12-09  发布在  Ionic
关注(0)|答案(1)|浏览(146)

我想用单选按钮来实现$ionicPopup。但是,我的尝试并不像预期的那样工作。我应该有3个选项可供选择,所以如果我选择选项“1”并按“是”,我希望控制台日志打印出“1 ...”到目前为止,我似乎无法将单选按钮与它在控制器中的等效作用域变量连接起来。
如何反映从单选按钮部分加载到离子弹出窗口中的变化?
在控制器中:

$ionicPopup.confirm({
                    templateUrl: 'templates/partials/orderPopup.html',
                    title: 'XYZ?',
                    scope: $scope,
                    buttons: [{
                        text: 'Yes',
                        type: 'button-positive',
                        onTap: function (e) {
                            console.log($scope.choice);
                        }
                    }, {
                        text: 'No',
                        type: 'button-default',
                        onTap: function (e) {
                            $state.go('shoppingCart');
                        }
                    }]
                })

又在观:

<ion-list ng-controller="shoppingCartCtrl">
    <style>
        .wrapping-list .item-content, .wrapping-list .item {
            overflow: initial;
            white-space: initial;
        }
    </style>
    <ion-radio class="wrapping-list" ng-model="choice" ng-value="'1'">Option1</ion-radio>
    <ion-radio class="wrapping-list" ng-model="choice" ng-value="'2'">Option2</ion-radio>
    <ion-radio class="wrapping-list" ng-model="choice" ng-value="'3'">Option3</ion-radio>
</ion-list>

如果在弹出调用之前执行$scope.choice = 2,则可以看到选项2被选为默认值,但是,单击任何其他选项,然后单击OK,控制台将返回2

ukxgm1gy

ukxgm1gy1#

问题出在ng-model上。当模型是一个对象时,Angular 中的双向绑定可以工作,该对象可以是视图和控制器中的updated via reference。因此,如果你按如下所示更改模型,你的代码将可以工作:

控制器

$scope.choice = {
  value: '2'
};

HTML

<ion-radio class="wrapping-list" ng-model="choice.value" ng-value="'1'">
  Option1
</ion-radio>
<ion-radio class="wrapping-list" ng-model="choice.value" ng-value="'2'">
  Option2 
</ion-radio>
<ion-radio class="wrapping-list" ng-model="choice.value" ng-value="'3'">
  Option3
</ion-radio>

我创建了一个codepen来演示下面的工作代码:http://codepen.io/addi90/pen/aNroNN?editors=1010

相关问题