Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/404.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Ionic Framework/AngularJS中的两组单选按钮_Javascript_Angularjs_Ionic Framework - Fatal编程技术网

Javascript Ionic Framework/AngularJS中的两组单选按钮

Javascript Ionic Framework/AngularJS中的两组单选按钮,javascript,angularjs,ionic-framework,Javascript,Angularjs,Ionic Framework,我有两套单选按钮,都有相同的值。其中一个是用户输入,另一个用于在输入后显示结果 我能够正确保存这些值,但问题是在任何时候只有一个单选按钮显示为活动。我真正想要的是每台都有一台收音机处于活动状态 app.js: angular.module('starter', ['ionic', 'starter.controllers']) .config(function($stateProvider, $urlRouterProvider) { // Ionic uses AngularUI Ro

我有两套单选按钮,都有相同的值。其中一个是用户输入,另一个用于在输入后显示结果

我能够正确保存这些值,但问题是在任何时候只有一个单选按钮显示为活动。我真正想要的是每台都有一台收音机处于活动状态

app.js:

angular.module('starter', ['ionic', 'starter.controllers'])

.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

    // setup an abstract state for the tabs directive
    .state('tab', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
    })

    .state('tab.dash', {
      url: '/dash',
      views: {
        'tab-dash': {
          templateUrl: 'templates/tab-dash.html',
          controller: 'DashCtrl'
        }
      }
    })        

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/dash');

});
controllers.js:

angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope, $window, $ionicPlatform) {

    $ionicPlatform.ready(function() {
        // Ready functions
    });

    $scope.grossOptionsList = [
    { text: "Year", value: "year" },
    { text: "Month", value: "month" },
    { text: "Week", value: "week" },
    { text: "Day", value: "day" }
    ];

    $scope.resultsOptionsList = [
    { text: "Year", value: "year" },
    { text: "Month", value: "month" },
    { text: "Week", value: "week" },
    { text: "Day", value: "day" }
    ];

// Default values
    $scope.data = {};
    $scope.data.grossOptions = 'year';
    $scope.data.resultOptions = 'month';


    $scope.updateGrossOptions = function(item) {
        console.log( 'Gross option: ' + item.value );
    }

    $scope.updateResultOptions = function(item) {
        console.log( 'Results option: ' + item.value );
    }

})
tab-dash.html:

<ion-view title="Salary Calculator">
  <ion-content class="has-header">

    <div class="button-bar padding">

        <ion-radio ng-repeat="item in grossOptionsList"
                   ng-value="item.value"
                   ng-model="data.grossOptions"
                   ng-change="updateGrossOptions(item)"
                   class="button button-positive button-outline">
          {{ item.text }}
        </ion-radio>

        </div>

    <div class="list list-inset">

        <div class="item item-divider">
                Results per {{ data.resultOptions }}
            </div>

        <div class="button-bar padding row item">

        <ion-radio ng-repeat="item in resultsOptionsList"
                   ng-value="item.value"
                   ng-model="data.resultOptions"
                   ng-change="updateResultOptions(item)"
                   class="button button-positive button-outline">
          {{ item.text }}
        </ion-radio>

        </div>

</div>

  </ion-content>
</ion-view>

{{item.text}
每{data.resultOptions}的结果
{{item.text}

我可以为每个单选按钮组设置值,但我希望为每个单选按钮组设置一个值(即输入的月份和结果的日期)。

!我只是没有为这两组设置
name
值。叹气。

我只是想利用您的认识在这里发布我的解决方案,这需要name属性,以防它对其他人有所帮助。我为此挣扎了一段时间,因为我也在使用ng repeat。这个解决方案对我有效:

<ion-radio ng-repeat="option in question.options" ng-model="question.response" ng-value="option.text"name="{{question.id}}">
   {{option.text}}

</ion-radio>

{{option.text}

>。<太简单了!离子指令应包括: