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

Question

我有这个表单，它使用了 3 个 ionic 单选按钮。有没有办法根据所选的单选按钮移动到不同的页面。例如:我的单选按钮被命名

1.USO 2.OASO 3.TFTSO

如果我选择 USO，我想移动到另一个页面，如果我选择 OASO，我想移动到另一个不同的页面，依此类推。我只想在单击我在代码中实现的“继续”按钮后才移动。

这就是我在 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>

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

.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 服务注入(inject)您的 Controller 。
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，而是状态名称。

编辑2

这里是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