离子弹出式单选按钮

Question

我想用单选按钮实现 $ionicPopup。然而，我所尝试的并没有像预期的那样工作。我应该有 3 个选项可供选择，所以如果我选择选项“1”并按 'Yes'，我希望控制台日志打印出“1”...到目前为止我似乎无法连接收音机控制器中具有等效范围变量的按钮。

如何反映在 ionic 弹出窗口中加载的单选按钮部分的更改？

在控制器中：

$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 被选为默认选项，但是，在单击任何其他选项然后单击“确定”后，控制台 returns 2

Answer 1

问题出在 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>

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

离子弹出式单选按钮

Ionic popup radio buttons

popup

radio

ionic-framework