根据选中的单选按钮移动到不同的页面

Question

我有这个表格，它有3个离子单选按钮使用。有一种方法可以根据所选的单选按钮移动到不同的页面。例如：我的单选按钮被命名为

1.USO 2.OASO 3.TFTSO

如果我选择USO，我想移动到另一个页面;如果我选择OASO等，我想移动到另一个不同的页面。我想在我点击＆＃39;继续＆＃39;之后移动。我在代码中实现的按钮。

这是我通过单选按钮实现的方式和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

.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'
     };

})

我的控制器

.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) {

});

Answer 1

尝试将ng-click添加到您的Proceed按钮并定义功能，该功能将分析您所选data.clientSide的值，然后拨打$location.path(url)。您需要将$location服务注入您的控制器 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);
  };

和HTML：

<button ng-click="goSomewhere()">Proceed</button>

演示：http://plnkr.co/edit/jawx0OivVmu2EyNmAbR9?p=preview

修改

我上面的回答与angular-route有关，而与ui-router无关。在最后，您需要使用除函数调用之外的所有相同代码。而不是location.path()我必须

$state.go(yourStateName)

请注意，不是url，而是州名。

EDIT2

以下是ionic框架的代码（几乎相同）+应用程序的设置。

配置：

.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');
  });

功能：

  $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);
  };

演示：http://plnkr.co/edit/0sk3dECPNm35HgMqiprt?p=preview

Answer 2

而不是{{item.text}}

尝试这样的事情：

  

a href =“”＃/ viewName / {{item.text}}“}”＆gt; {{item.text}}