离子 - 在弹出窗口中显示单选按钮

Ionic - show radio buttons in popup

本文关键字：显示单选按钮窗口离子更新时间：2023-09-26

我的应用程序中有家乡状态

$stateProvider
.state('home', {
    url: '/home',
    cache: false,
    controller: 'HomeCtrl as home',
    templateUrl: 'home/home.html'
})

我的家庭控制器

angular
   .module('home')
   .controller('HomeCtrl', HomeCtrl);
HomeCtrl.$inject = ['$scope', '$state', '$ionicPopup', '$ionicSideMenuDelegate', '$ionicScrollDelegate', '$ionicLoading',];
function HomeCtrl($scope, $state, $ionicPopup, $ionicSideMenuDelegate, $ionicScrollDelegate, $ionicLoading){
     var vm = this;
     vm.sortCriteria = 'Price';
     vm.showSortPopup = showSortPopup;
     return vm;
     function showSortPopup(){
        var myPopup = $ionicPopup.show({
            title: 'Sort',
            templateUrl : 'home/sort.html',
            scope : vm,
            buttons: [
                { text: 'Cancel'},
                {
                    text: 'Ok',
                    type: 'button-positive',
                    onTap: function(e) {
                        console.log(vm.sortCriteria);
                    }
                },
            ]
        });
    }
}

排序.html

<ion-list>
    <ion-radio ng-model="home.sortCriteria" ng-value="'Price'">Price</ion-radio>
    <ion-radio ng-model="home.sortCriteria" ng-value="'Distance'">Distance</ion-radio>
</ion-list>

由于我的sortCriteria不属于$scope如何将其绑定到弹出窗口中的单选按钮？

使用 vm 而不是 $scope 有什么特殊原因吗？我宁愿尝试按如下方式使用$scope：

.controller('HomeCtrl', function ($scope, $ionicPopup) {
//            var vm = this;
            $scope.sortCriteria = 'Price';
            $scope.showSortPopup = showSortPopup;
//            return vm;
            function showSortPopup() {
                var myPopup = $ionicPopup.show({
                    title: 'Sort',
                    templateUrl: 'home/sort.html',
                    scope: $scope,
                    buttons: [
                        {text: 'Cancel'},
                        {
                            text: 'Ok',
                            type: 'button-positive',
                            onTap: function (e) {
                                console.log($scope.sortCriteria);
                            }
                        },
                    ]
                });
            }
        })

并更新排序.html如下所示：

<ion-list>
    <ion-radio ng-model="sortCriteria" ng-value="'Price'">Price</ion-radio>
    <ion-radio ng-model="sortCriteria" ng-value="'Distance'">Distance</ion-radio>
</ion-list>