jQuery + angularjs If语句有效，但href值未更改

Spade 发表于 Dev

337

铲

香港专业教育学院遇到一个小问题，我似乎无法弄清楚香港专业教育学院哪里出了问题。我正在尝试更改更改时在选择字段之外的href值。控制台正在正确记录日志，但href并未更改。

**我希望href值更改并包含文本和angularjs数据，例如“ http://test.com/ {{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，但my href不会更改我哪里出错了？

内特·巴贝蒂尼（Nate Barbettini）

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

控制器

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

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

小提琴：这里

编辑

从您的评论看来，您似乎想根据选择将整个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>

更新的小提琴：这里

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。