Jquery + angularjs If statement working but href value not changing

Question

Ive run into a little problem and I can't seem figure out where ive went wrong. I am trying to change an href value outside of the select field when it changes. Console is logging properly but href is not changing.

**I would like the href value to change and contain text + an angularjs data like so "http://test.com/{{ch.names}}"

here is my select:

<select class="form-control3" name="ch" id="ch">
     <optgroup label="Ch">
                <option value="x6">x6</option>
                        <option value="P4">P4</option>
                </optgroup>
 </select>

this is the href attempting to change:

<a href="#" class="a-class">{{ch.names}}</a>

and here is my jquery:

<script type="text/javascript">
  $(document).ready(function() {
     $("#ch").change(function() {
        if($(this).val() == 'P4') {
           $(".a-class").attr("href", "http://test.com/{{ch.names}}");
           console.log(".a-class");
        }
        else {
           $(".a-class").attr("href", "http://test2.com/{{ch.names}}");
           console.log(".a-class1");
        }
     });
  });
 </script>

when the values are changed it will log the class or class1 fitting the if statement but my href does not change where have I went wrong?

It is working for me but looks like {{ }} expression is what is causing this issue. are you using third part scripts like moustache.js or your own — KrishnaDhungana
– KrishnaDhungana, Commented Feb 3, 2015 at 22:56
@KrishnaDhungana im using angularjs as well and would like the end of the url to contain a value from the angular ng-repeat="ch in data" — Spade
– Spade, Commented Feb 3, 2015 at 23:00
@Kepoly oh right. The problem is with dynamic angular content added. You have to use $compile to build expression before jquery changes the href. — KrishnaDhungana
– KrishnaDhungana, Commented Feb 3, 2015 at 23:10

Nate Barbettini · Accepted Answer · 2015-02-04 00:41:13Z

2

It would be a lot cleaner to simply do this with Angular:

<div ng-app="TestApp">
    <div ng-controller="TestController">
        <select ng-model="selected" ng-options="option for option in options"></select>
        <a ng-href="http://test.com/{{selected}}">Selected: {{selected}}</a>
    </div>
</div>

Controller

var myApp = angular.module('TestApp',[]);

myApp.controller('TestController', ['$scope', function($scope) {
    $scope.options = ['x6', 'P4'];
    $scope.selected = 'P4';
}]);

Fiddle: here

EDIT

From your comment, it sounds like you want to switch the whole URL to something else depending on the selection. You could save that data as a property in an array of objects, like this:

myApp.controller('TestController', ['$scope', function($scope) {
    $scope.options = [
        {
            title: 'x6',
            urlPrefix: 'http://test1.com/'
        }, {
            title: 'P4',
            urlPrefix: 'http://test2.com/'
        }];

    $scope.selected = $scope.options[1];
}]);

You'll need to change the HTML a little:

<select ng-model="selected" ng-options="option.title for option in options"></select>
<a ng-href="{{selected.urlPrefix}}{{selected.title}}">Selected: {{selected.title}}</a>

Updated fiddle: here

edited Feb 4, 2015 at 0:41

answered Feb 3, 2015 at 23:19

Nate Barbettini

54.1k28 gold badges136 silver badges153 bronze badges

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

7 Comments

Etheryte Over a year ago

The correct usage would be to declare your controller as a module for your app: jsfiddle.net/aheLrk3v

Nate Barbettini Over a year ago

@Nit Ha, beat me to it. Updated. Thanks for the catch.

Spade Over a year ago

@NateBarbettini I like this idea but what if the urls are different with each select option like http://{{change on select not to select value}}.com/{{change to option value}} that's why I had the if statement in my example

Nate Barbettini Over a year ago

@Kepoly In that case, you should store the URL and option title in an object in the controller and bind an array of those objects to the <select>. I've updated my example; hopefully I understood what you are looking for.

Nate Barbettini Over a year ago

No problem! FYI, the example was a little contrived: it would make more sense to just save the whole URL in an object on the scope, instead of rendering as {{selected.urlPrefix}}{{selected.title}}. Just do {{selected.url}} instead!

|

Ninjarabbi · Accepted Answer · 2015-02-04 01:03:26Z

The angular way to do this is not to use jQuery at all. You create an app and a controller, bind the values and let angular take care of it. Plunkr

Html:

<body ng-app="TestApp">
  <div ng-controller="TestCtrl">
    <select class="form-control3" name="ch" id="ch" ng-model="href_value" ng-options="value.data group by value.group for value in opt_values"></select>
    <a href="{{href_value.url}}{{href_value.data}}" class="a-class">{{href_value.data}}</a>
  </div>
</body>

Javascript:

angular.module('TestApp', [])
  .controller('TestCtrl', ['$scope', function($scope) {
    $scope.opt_values = [
      {data: 'x6', url: "http://test.com/", group: "Ch"}, 
      {data: 'P4', url: "http://test2.com/", group: "Ch"}];
}]);

Collectives™ on Stack Overflow

Jquery + angularjs If statement working but href value not changing

2 Answers 2

7 Comments

Html:

Javascript:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Html:

Javascript:

Comments

Your Answer

Sign up or log in

Post as a guest

Related