2014-01-30 3 views
5

다음 드롭 다운을 사용하여 angularjs를 사용했습니다.angularjs의 드롭 다운에서 href 호출

<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를 호출하려고합니다. 드롭 다운이 잘 채워집니다. 옵션을 선택하면 아무 것도하지 않거나 URL을 호출하지 않습니다. angularjs에서 어떻게 이것을 달성 할 수 있는지 알려주십시오.

답변

4

근무 jsfiddle : http://jsfiddle.net/C3Adv/3/

<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() 경로 그냥 페이지에 표시되지만이해야 그래서 대신 바이올린 INT 어떤 영향을 미칠 것 같지 않습니다 그렇지 않으면 예상대로 작동합니다.


접근 방법에는 여러 가지가 있습니다. 먼저 ng-repeat을 옵션 요소에 사용하므로 name.id은 해당 요소 외부에서 사용할 수 없습니다. ng-href에서 사용할 때 undefined 일 수 있습니다 (범위가 $parent 인 경우를 제외하고는 그렇지만이 사실이 정확하지 않은 경우).

+0

작동하지 않습니다. [업데이트 된 바이올린]보기 (http://jsfiddle.net/GruffBunny/C3Adv/15/) –

+0

좀 더 구체적으로 말씀해 주시겠습니까? 나는 많은 단락이 html에 추가 된 것을 보지만 다른 변화는 없다. $ location.path()는 바이올린 내부에는 효과가 없습니다. 나는 그것이 바이올린 그 자체에 의해 부과 된 몇 가지 제한 때문에야만한다고 생각할 것이다. 업데이트 된 바이올린에서 코드를 가져 와서 새로운 컨트롤러 (yeoman으로 생성)에 붙여 넣으면 작동합니다. 내가 선택한 경로로 경로가 변경됩니다. 경로가 유효해야하므로 app.js에 새로운 route/edit/: id도 구성했습니다. – user2847643

+0

드롭 다운에서 a1을 선택하면 ID가 1 인 단락으로 스크롤되지 않습니다. 피들에 문제가 있다고 생각하지 마십시오. 필요한 단락으로 스크롤하지 않는다는 것을 보여주기 위해 단락을 추가하는 것뿐이었습니다. 주의 URL은 단편 (#/edit/...)입니다. –

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를 주입하는 것을 잊지 마십시오.

관련 문제