使用离子无线电的Ionic AngularJS Radio Group ng-model问题

时间:2015-11-19 16:09:21

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

我无法使用带有Ionic 1.1.1的AngularJS 1.4.7检索Radio Group的值;

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

请参阅问题的codepen摘录: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);
  }  
});

3 个答案:

答案 0 :(得分:4)

尝试以下方法:

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

说明:

    {li> $test未在$scope中定义。
  1. $开头的变量在angular中具有特殊含义,因此您不应将它们用作常规变量名称
  2. <强>更新 在双引号ng值

    中对字符串值进行singelquote也很重要
    <ion-radio ng-model="test.val" ng-value="'s1'">Sample 1</ion-radio>
    

答案 1 :(得分:0)

我已经设法解决了这个问题,然后再阅读了#34;接受的答案&#34;帖子。 请参阅下面我提出的解决方案。

我已将ng值替换为值,并将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  

});

答案 2 :(得分:0)

尝试以下方法,

<强> 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