wie man radio-input-Wert mit Ionic und AngularJS?

habe ich eine Liste von ein paar radio-buttons und einem Eingang, und aus irgendeinem Grund komme ich nicht an die ausgewählte radio Wert.

hier ist mein Beispiel, oder jsfiddle. Wenn Sie einen Blick in die Konsole ein und senden das Formular können Sie sehen, dass selbst wenn Sie wählen Sie eine Optionsschaltfläche, die Antwort ist nicht definiert, aber der input-Wert kommt in ok

JS:

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 = {}));

HTML:

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

InformationsquelleAutor Patrioticcow | 2014-09-20
  1. 4

    Müssen Sie pre-initialisieren Sie die Einstellungen in Ihrem controller, so dass die Einstellungen nicht innerhalb des untergeordneten Bereich, wenn ng-repeat, stattdessen ist er erbte Sie von den controller-scope -, auch die Verwendung ng-value="test.id" statt value=interpolation (value="{{test.id}}"), es bindet die angegebene Ausdruck den Wert des Radios, so dass, wenn das element ausgewählt ist, das ngModel dieses element wird festgelegt, um die gebundenen Wert.

    JS:

    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 = {}));

    HTML:

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

    InformationsquelleAutor PSL
Schreibe einen Kommentar