[英]Two sets of radio buttons in Ionic Framework/AngularJS
我有兩組具有相同值的單選按鈕。 其中一個是用戶輸入,一個用於顯示結果。
我能夠正確保存值,但問題是任何時候只有一個單選按鈕顯示為活動狀態。 我真正想要的是每個集合都有一個無線電。
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 );
}
})
制表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>
演示plnkr在這里顯示我可以設置每個單選按鈕組的值,但我想為每個單元組設置一個(即輸入的月份和結果的日期)。
沒關系! 我剛剛沒有為這兩個組設置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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.