[英]move to different pages based on the checked radio button
i have this form and it has 3 ionic radio buttons used.Is there a way to a move to different pages according to the radio buttons that are selected.For ex: my radio buttons are named 我有这种形式,它使用了3个离子单选按钮。是否有一种方法可以根据所选的单选按钮移动到不同页面。例如:我的单选按钮被命名为
1.USO 2.OASO 3.TFTSO 1.USO 2.OASO 3.TFTSO
I want to move to a different page if i select USO , and to another different page if i choose OASO and so on. 如果我选择USO,我想移到另一个页面,如果我选择OASO,我想移到另一个页面。 I want to move only after i click the 'Proceed' Button that i've implemented in my code.
我只想单击代码中实现的“继续”按钮,然后才能移动。
This is how i've implemented by radio buttons and proceed button in html 这就是我通过HTML中的单选按钮和继续按钮实现的方式
<label class="labelColor">
<h5><b>Select Standing Order Type</b></h5>
</label>
<div class="list">
<ion-radio ng-repeat="item in clientSideList"
ng-value="item.value"
ng-model="data.clientSide">
{{ item.text }}
</ion-radio>
</div>
<!-- BUTTONS -->
<div class="col"
style="text-align: center">
<button align="left"
class="button button-block button-reset"
style="display:
inline-block;width:100px;text-align:center "
type="reset"
ng-click="submitted = false; reset()"
padding-top="true">
Reset
</button>
<button class="button button-block button-positive"
style="display: inline-block;width:100px "
ng-click="submitted=true; "padding-top="true">
Proceed
</button>
</div>
my angularjs 我的angularjs
.controller('OrderCtrl', function($scope,$state) {
$scope.clientSideList = [
{ text: "Utility Standing Order", value: "uso" },
{ text: "Own Account Standing Order", value: "oaso" },
{ text: "Third Party Fund Transfer Standing Order", value: "tpftso" }
];
$scope.data = {
clientSide: 'uso'
};
})
My controller 我的控制器
.controller('OrderCtrl', function($scope,$state, $http, $ionicPopup) {
$scope.clientSideList = [
{ text: "Utility Standing Order", value: "uso" },
{ text: "Own Account Standing Order", value: "oaso" },
{ text: "Third Party Fund Transfer Standing Order", value: "tpftso" }
];
$scope.data = {
clientSide: 'uso'
};
$scope.move = function () {
var path;
switch($scope.data.clientSide) {
case 'uso': path = '/so/utilitystanding'; break;
case 'oaso': path = '/so/ownstandingorder'; break;
case 'tpftso': path = '/so/thirdstandingorder'; break;
}
$state.go(app.standing);
};
})
.controller('utilityStandingCtrl', function($scope,$state) {
});
Try to add ng-click
to your Proceed
button and define function which will analyse value of your selected data.clientSide
and then call $location.path(url)
. 尝试将
ng-click
添加到“ Proceed
按钮,然后定义函数,该函数将分析所选data.clientSide
值,然后调用$location.path(url)
。 You need to inject $location
service into your controller. 您需要将
$location
服务注入到控制器中。
JavaScript: JavaScript的:
$scope.goSomewhere = function () {
var path;
switch($scope.data.clientSide) {
case 'uso': path = '/uso'; break;
case 'oaso': path = '/oaso'; break;
case 'tpftso': path = '/tpftso'; break;
}
$location.path(path);
};
And HTML: 和HTML:
<button ng-click="goSomewhere()">Proceed</button>
My answer above is related to angular-route
, not to ui-router
. 我在上面的回答与
angular-route
,而不与ui-router
。 In the last you need to use all the same code except of function call. 最后,除了函数调用外,您需要使用所有相同的代码。 Instead of
location.path()
it must me 代替
location.path()
它必须是我
$state.go(yourStateName)
Please note, not url
, but state name. 请注意,不是
url
,而是州名。
Here is code for ionic
framework (almost the same) + settings of application. 这是
ionic
框架的代码(几乎相同)+应用程序的设置。
Config: 配置:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: "/main",
templateUrl: 'main.html'
})
.state('usoStateName', {
url: '/uso',
templateUrl: 'page.html',
controller: 'usoCtrl'
})
.state('oasoStateName', {
url: '/oaso',
templateUrl: 'page.html',
controller: 'oasoCtrl'
})
.state('tpftsoStateName', {
url: '/tpftso',
templateUrl: 'page.html',
controller: 'tpftsoCtrl'
});
$urlRouterProvider.otherwise('/main');
});
And function: 和功能:
$scope.goSomewhere = function () {
var path;
switch($scope.data.clientSide) {
case 'uso': path = 'usoStateName'; break;
case 'oaso': path = 'oasoStateName'; break;
case 'tpftso': path = 'tpftsoStateName'; break;
}
$state.go(path);
};
Instead of {{ item.text }} 代替{{item.text}}
Try something like this: 尝试这样的事情:
a href=""#/viewName/{{item.text }}"}">{{ item.text }}
a href =“”#/ viewName / {{item.text}}“}”> {{item.text}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.