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。角度模拟中的双向绑定是一个可以从视图和控制器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

离子弹出单选按钮

1 个答案: