离子弹出单选按钮

Question

我想用单选按钮实现$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 被选择为默认选项，但是，在单击任何其他选项然后单击确定时，控制台会返回 2

Answer 1

问题在于ng-model。当他的模型是一个对象时，角度中的 2 路绑定可以工作，该对象可以是视图和控制器中的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