Javascript Jquery+angularjs If语句工作，但href值不变_Javascript_Jquery_Html

Javascript Jquery+angularjs If语句工作，但href值不变

javascript jquery html

Javascript Jquery+angularjs If语句工作，但href值不变,javascript,jquery,html,Javascript,Jquery,Html,我遇到了一个小问题，我似乎不知道哪里出了问题。当某个href值更改时，我正在尝试在选择字段之外更改该值。Console正在正确记录，但href未更改 **我希望href值更改并包含text+angularjs数据，如so{{ch.names} 以下是我的选择： <select class="form-control3" name="ch" id="ch"> <optgroup label="Ch"> <option val

我遇到了一个小问题，我似乎不知道哪里出了问题。当某个href值更改时，我正在尝试在选择字段之外更改该值。Console正在正确记录，但href未更改

**我希望href值更改并包含text+angularjs数据，如so{{ch.names}

以下是我的选择：

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

这是试图更改的href：

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

下面是我的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>

当值更改时，它将记录符合if语句的类或class1，但我的href没有更改我哪里出错了

简单地用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>

小提琴：

编辑

从您的评论中，听起来您希望根据选择将整个URL切换到其他URL。您可以将该数据保存为对象数组中的属性，如下所示：

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

您需要稍微更改HTML：

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

更新的fiddle:

实现这一点的方法是根本不使用jQuery。创建一个应用程序和一个控制器，绑定这些值，让angular处理

Html:

这对我来说是可行的，但看起来是{{}表达式导致了这个问题。您是否使用第三方脚本，如moustach.js或own@KrishnaDhungana我也在使用angularjs，希望url的结尾包含数据中angular ng repeat=ch的值。这是一种非常非角度的方式。@你能推荐一个更好的替代方法吗？@Kepoly oh，对。问题在于添加了动态角度内容。在jquery更改href之前，您必须使用$compile来构建表达式。正确的用法是将您的控制器声明为应用程序的模块：@Nit Ha，请告诉我。更新。谢谢你的提示。@NateBarbettini我喜欢这个想法，但是如果URL与每个选择选项不同，比如http://{{change on select not select value}}.com/{{change to option value}}}，那会怎么样呢？这就是为什么我的example@Kepoly那样的话您应该将URL和选项标题存储在控制器中的对象中，并将这些对象的数组绑定到。我更新了我的例子；希望我明白你在找什么。没问题！仅供参考，这个例子有点做作：只将整个URL保存在作用域上的对象中，而不是呈现为{{selected.urlpeffix}{{selected.title}，这会更有意义。只需执行{{selected.url}}即可！

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

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

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"}];
}]);