AngularJS option list to change URL

Question

I want to redirect to another page depending on the option chosen, but it's not even console logging. I tried using ng-change too

HTML:

      <select ng-options="option for option in selectCate" ng- 
      model="selectedCate" ng-click="selectedCateChange()">
      </select>

JS:

      $scope.selectCate = ['Amenities', 'Attractions'];

      $scope.selectedCate = $scope.selectCate[0];

      $scope.selectedCateChange = function () {

          if ($scope.selectedCateChange == "Amenities")
          {
              console.log("aa")
          }
          else if ($scope.selectedCateChange == "Attractions")
          {
             $window.location.href = '#!/Attractions'
          }
      }

Use $state.go("your route name"); instead of $window.location.href and make sure injecting $state in your controller. and change $scope.selectedCate = $scope.selectCate[0]; to $scope.selectedCate = $scope.selectCate; — Sudhir Ojha
– Sudhir Ojha, Commented Oct 23, 2018 at 6:29
Not working, it doesn't seem to be reacting any all. Can't even console log — HangulSR
– HangulSR, Commented Oct 23, 2018 at 6:47

Sudhir Ojha · Accepted Answer · 2018-10-23 07:13:41Z

2

Instead of using ng-click on <select> use ng-change and pass the selectedCate in selectedCateChange. Please consider the following working code snipet.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedCate" ng-change="selectedCateChange(selectedCate)">
      <option ng-repeat="option in selectCate" value="{{option}}">{{option}}</option>
</select>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.selectCate = ['Amenities', 'Attractions'];
    $scope.selectedCateChange = function (selectedCate) {
       if (selectedCate == "Amenities"){
           alert("aa");
       }else if (selectedCate == "Attractions"){
           alert("call your router here");
       }
   }
});
</script>
</body>
</html>

answered Oct 23, 2018 at 7:13

Sudhir Ojha

3,3053 gold badges16 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

HangulSR Over a year ago

Thanks for the help! :)

HangulSR Over a year ago

Just one more question, is it possible to let the option stay as it is when the page is changed? For example, i select attractions, and on the attractions page the option list would stay at attractions and not go back to amenities

Sudhir Ojha Over a year ago

Yes you can make one value default selected using ng-selectedon option tag.

HangulSR Over a year ago

Uhh, i just looked up on ng-selected, i don't think thats what I want. I am not trying to initialize a value, I want it to stay as according to the choice picked

Sudhir Ojha Over a year ago

@HangulSR happy to help you.

sivamani s · Accepted Answer · 2018-10-23 06:10:32Z

For Redirect the angular url can you use the $stateProvider.

$stateProvider
            .state("Attractions", {
                url: "/Attractions",
                templateUrl: "app/components/layout/Attractions.html",
                resolve: loader(["scripts/components/layout/AttractionsController", "scripts/components/distributed/popupModalController"]),
                controller: "attractionsCtrl"
            });
$state.go('Attractions');

Collectives™ on Stack Overflow

AngularJS option list to change URL

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related