Question

控制器

.controller('FoodCtrl', function($scope, $ionicPopup) {
    $scope.favorite = { 'food': 'egg' };

    $scope.setFavoriteFood = function() {
        var popup = $ionicPopup.show({
            'templateUrl': 'popup-favorite.html',
            'title': 'Favorite Food',
            'subTitle': 'Please pick your favorite food',
            'scope': $scope,
            'buttons': [
                {
                    'text': '',
                    'type': 'button-assertive icon ion-close-round'
                },
                {
                    'text': '',
                    'type': 'button-balanced icon ion-checkmark-round',
                    'onTap': function(event) {
                        console.log($scope.favorite.food);
                        return $scope.favorite.food;
                    }
                }
            ]
        });

        popup.then(function(result) {
            console.log('your favorite food is ' + result);
        });
    };
}

弹出模板

<script id="popup-favorite.html" type="text/ng-template">
    <ion-list>
        <ion-radio ng-model="favorite.food" ng-value="egg">Egg</ion-radio>
        <ion-radio ng-model="favorite.food" ng-value="tomato">Tomato</ion-radio>
    </ion-list>
</script>

现在，$scope.favorite.food和单选按钮之间的数据绑定根本不起作用。如果我用单个输入字段<input type="text" ng-model="favorite.food">替换单选按钮，它会再次起作用，这很奇怪。

如何让我的单选按钮按预期工作？

Answer 1

如果你在ng-model中使用$ parent.Problem是固定的

<script id="popup-favorite.html" type="text/ng-template">
        <ion-list>
           <ion-radio ng-model="$parent.favorite.food" ng-value="'egg'" ng-change="test(formData)" >egg</ion-radio>
           <ion-radio ng-model="$parent.favorite.food" ng-value="'tomato'" ng-change="test(formData)">tomato</ion-radio>
        </ion-list>
</script>

Answer 2

我会尝试在引号

中添加一个字符串

  <ion-radio ng-model="favorite.food" ng-value="'egg'">Egg</ion-radio>
   <ion-radio ng-model="favorite.food" ng-value="'tomato'">Tomato</ion-radio>

取自http://ionicframework.com/docs/api/directive/ionRadio/

的示例

我相信如果没有引号，它会期望向$ scope.egg和$ scope.tomato发送信息。

您可以尝试调整代码，使用更具动态性的方法，例如在角度文档中给出的示例，并让您的单选按钮动态生成，如：https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

Answer 3

使用单个输入，您所做的只是更改food的值。对于单选按钮，您需要多个选项，因此您需要扩展现有对象。你可以尝试这样的事情：

JS

 $scope.favourites = [
    { food: "egg", value: 1 },
    { food: "tomato", value: 2 },
    { food: "cheese", value: 3} ]

HTML

<script id="popup-favorite.html" type="text/ng-template">
     <ion-radio ng-repeat="item in favorites"
                ng-value="item.value"
                ng-model="favourites.food"
                ng-change="doSomething(item)">
                {{item.food}}
     </ion-radio>
</script>

如果你想在视图/控制器之间共享food数据，你真的应该使用服务（如果你还没有）。

离子 - 在弹出窗口中使用单选按钮

控制器

弹出模板

3 个答案: