Calling href from dropdown in angularjs

Question

I have the following drop down using 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>

I am trying to call href on selected option in the drop down. The drop down populates fine. When I select any option it doesn't do anything or call the url. Please let me know how I can achieve this in angularjs.

Answer 1

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

Sample controller:

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() does not seem to have any effect int the fiddle so instead the path is just displayed on the page but it should work as expected otherwise.

---

There is a number of things wrong with your approach. First of all you use ng-repeat on the option element so name.id won't be available outside of that element. It would probably be undefined when you use it in ng-href (unless you have it defined in the $parent scope as well but if I understand correctly this is not true).

Answer 2

The select statement looks a bit over complex to me and contains a few errors. Try this simpler version:

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

Controller:

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

Don't forget to inject $location and $anchorScroll into the controller.