使用 ion-radio 的 Ionic AngularJS Radio Group ng-model 问题答案

【问题标题】：Ionic AngularJS Radio Group ng-model issue using ion-radio使用 ion-radio 的 Ionic AngularJS Radio Group ng-model 问题
【发布时间】：2016-02-21 21:23:28
【问题描述】：

我无法使用 AngularJS 1.4.7 和 Ionic 1.1.1 检索 Radio Group 的值；

任何想法都会很棒，谢谢。

查看问题的codepen sn-p：http://codepen.io/angsar/pen/RWdvrO

HTML

<html ng-app="app">
    <head>
        <link rel="stylesheet" href="http://code.ionicframework.com/1.1.1/css/ionic.min.css" />
        <link href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css" rel="stylesheet">
        <script src="http://code.ionicframework.com/1.1.1/js/ionic.bundle.js"></script>
    </head>
    <body ng-controller="myCtrl">    
        <ion-content padding="true">

            <form class="list" ng-submit="Pass(test)">
                <p>Selected Sample: {{test.val}}</p>
                <ion-radio ng-model="test.val" ng-value="s1">Sample 1</ion-radio>
                <ion-radio ng-model="test.val" ng-value="s2">Sample 2</ion-radio>
                <button class="button button-energized button-large icon-right button-full">Test</button>
            </form>

        </ion-content>      
    </body>
</html>

Javascript

angular.module('app', ['ionic'])
.controller('myCtrl', function($scope) {
  $scope.Pass = function($test) {
    alert("Test: "+$test.val);
  }  
});

【问题讨论】：

标签： angularjs radio-button ionic-framework angular-ngmodel

【解决方案1】：

尝试以下方法：

angular.module('app', ['ionic'])
.controller('myCtrl', function($scope) {
 $scope.test = {};
 $scope.Pass = function($test) {
   alert("Test: "+ $scole.test.val);
 }  
});

解释：

$test 未在您的 $scope 中定义。
以$ 开头的变量在 Angular 中具有特殊含义，因此不应将它们用作常规变量名

更新： 在双引号 ng-value 中单引号引用字符串值也很重要

<ion-radio ng-model="test.val" ng-value="'s1'">Sample 1</ion-radio>

【讨论】：

或者你可以在你的<form>-tag 中添加一个ng-init="test={}"
谢谢。你说得对。我已经有一段时间没有写任何 Angular 并且忘记了基础知识。

【解决方案2】：

在阅读“已接受的答案”帖子之前，我已经设法解决了这个问题。我想出的解决方案也见下文。

我已将 ng-value 替换为 value，并将 test.val 替换为 test。

http://codepen.io/angsar/pen/LpvGzj

angular.module('app', ['ionic'])
.controller('myCtrl', function($scope) {

  $scope.Pass = function($test) {
    alert("Test: "+$test);
  }; //pass  

});

【讨论】：

【解决方案3】：

试试下面的，

html：

<form class="list" ng-init="test={}" ng-submit="Pass(test)">

angular.js

angular.module('app', ['ionic'])
.controller('myCtrl', function($scope) {
  $scope.Pass = function(test) {
     alert("Test: "+test.val);
  }
});

codepen： http://codepen.io/mohanapriya/pen/BzpzZx?editors=1010

【讨论】：