如何使用Ionic和AngularJS獲得無線電輸入值？

Question

我有一個單選按鈕和一個輸入列表，出於某種原因，我無法獲得選定的無線電值。

這裏是我的例子，或jsfiddle。如果您在控制檯看，並提交你可以看到，即使你選擇一個單選按鈕的反應是不確定的形式，但輸入價值在於確定

var SampleApp; 
 
(function (SampleApp) { 
 

 
    var app = angular.module('sampleApp', ['ionic']); 
 
    app.controller('MainCtrl', function ($scope) { 
 
     $scope.tests = [{ 
 
      "id": "1" 
 
     }, { 
 
      "id": "2" 
 
     }, { 
 
      "id": "3" 
 
     }]; 
 

 
     $scope.addResource = function (settings) { 
 
      console.log(settings); 
 
     }; 
 
    }); 
 

 
})(SampleApp || (SampleApp = {}));

<link href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.css" rel="stylesheet"/> 
 
<script src="http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js"></script> 
 

 
<div> 
 
    <div ng-app="sampleApp" ng-controller="MainCtrl"> 
 
     <ion-content style="display:block"> 
 
      <form ng-submit="addResource(settings)"> 
 
       <div class="list list-inset" ng-repeat="test in tests"> 
 
        <ion-radio ng-model="settings.id" value="{{test.id}}">{{test.id}}</ion-radio> 
 
       </div> 
 
       <br/> 
 
       <div class="list" style="margin: 5px 10px;"> 
 
        <label class="item item-input item-stacked-label"> <span class="input-label">Email</span> 
 

 
         <input type="text" ng-model="settings.email"> 
 
        </label> 
 
       </div> 
 
       <button class="button button-positive">Save</button> 
 
      </form> 
 
     </ion-content> 
 
    </div> 
 
</div>

Answer 1

你需要預先初始化設置在您的控制器，以便設置不在子範圍內創建如果ng-repeat，而是從控制器範圍繼承，也使用ng-value="test.id"而不是value=interpolation（value="{{test.id}}"），it binds the given expression to the value of your radio, so that when the element is selected, the ngModel of that element is set to the bound value。

var SampleApp; 
 
(function (SampleApp) { 
 

 
    var app = angular.module('sampleApp', ['ionic']); 
 
    app.controller('MainCtrl', function ($scope) { 
 
     $scope.settings = {}; //Initialize model here 
 
     $scope.tests = [{ 
 
      "id": "1" 
 
     }, { 
 
      "id": "2" 
 
     }, { 
 
      "id": "3" 
 
     }]; 
 

 
     $scope.addResource = function() { 
 
      console.log($scope.settings); 
 
     }; 
 
    }); 
 

 
})(SampleApp || (SampleApp = {}));

<link href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.css" rel="stylesheet"/> 
 
<script src="http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js"></script> 
 

 
<div> 
 
    <div ng-app="sampleApp" ng-controller="MainCtrl"> 
 
     <ion-content style="display:block"> 
 
      <form ng-submit="addResource()"> 
 
       <div class="list list-inset" ng-repeat="test in tests"> 
 
        <ion-radio ng-model="settings.id" ng-value="test.id">{{test.id}}</ion-radio> 
 
       </div> 
 
       <br/> 
 
       <div class="list" style="margin: 5px 10px;"> 
 
        <label class="item item-input item-stacked-label"> <span class="input-label">Email</span> 
 

 
         <input type="text" ng-model="settings.email"> 
 
        </label> 
 
       </div> 
 
       <button class="button button-positive">Save</button> 
 
      </form> 
 
     </ion-content> 
 
    </div> 
 
</div>