从angularjs中的下拉列表中调用href

时间:2014-01-30 18:49:19

标签: angularjs angularjs-directive

我使用angularjs进行以下下拉。

   <select ng-href="#/edit/{{name.id}}" class="form-control"  id="{{name.id}}">  
   <option ng-repeat="name in addas | filter:cc"
   id="{{name.id}}" value="{{name.name}}">{{name.as_number}}</option>
  </select>

我试图在下拉列表中调用选定选项的href。下拉填充很好。当我选择任何选项时,它不会做任何事情或调用网址。 请告诉我如何在angularjs中实现这一目标。

2 个答案:

答案 0 :(得分:4)

<select ng-model="adda" ng-options="a.name for a in addas" ng-change="onChange()">  
</select>

样本控制器:

function Ctrl($scope, $location) {
    $scope.addas = [
        {id: 1, name: 'a1', as_number: 1},
        {id: 2, name: 'a2', as_number: 2},
        {id: 3, name: 'a3', as_number: 3}
    ];

    $scope.onChange = function() {
        $location.path('/edit/' + $scope.adda.id);
    }
}

$location.path()似乎对小提琴没有任何影响,所以相反路径只显示在页面上,但它应该按预期工作。


您的方法存在许多问题。首先,您在选项元素上使用ng-repeat,因此name.id无法在该元素之外使用undefined。在ng-href中使用它时可能会$parent(除非您在{{1}}范围内定义它,但如果我理解正确则不是这样)。

答案 1 :(得分:2)

select语句看起来有点过于复杂,并且包含一些错误。试试这个更简单的版本:

<select ng-model='adda'
        ng-options='as_number for name in addas' 
        ng-change='scrollToName()'>  
</select>

控制器:

$scope.scrollToName = function(){
    $location.hash($scope.adda.id);
    $anchorScroll()
};

不要忘记将$location$anchorScroll注入控制器。