angularjs를 사용하여 선택 상자의 옵션에 ng-click 적용

게리 버튼

나는 전에 앵귤러를 사용하지 않았지만 이것이 작동하도록 노력하고 있습니다. 코드는 목록으로 작동했지만 선택 드롭 다운을 사용하여 동일한 작업을 수행하고 싶습니다. 누군가 제발 도와 줄 수 있습니까?

<select ng-model="data.selectedOption"> <option ng-click="myFilter = {pay_status : 'Paid'}" value="Paid Work">Paid Work</option> <option ng-click="myFilter = {pay_status : 'Volunteer'}" value="Volunteer Work">Volunteer Work</option> <option ng-click="myFilter = {opento : 'Undergraduates'}" value="Undergraduates">Undergraduates</option> <option ng-click="myFilter = {opento : 'Postgraduates'}" value="Postgraduates">Postgraduates</option> </select> </div>

나는 목록을 사용하여 동일한 코드 (ng-click 등)를 사용했으며 작동했기 때문에 옵션에 대해 동일한 작업을 할 수 있기를 바랐지만 변경해야 할 것은 무엇입니까?

당신의 도움을 주셔서 감사합니다!

Sam Ternent

컨트롤러를 통해 데이터에 바인딩하도록 select 지시문을 설정할 수 있습니다.

<div ng-controller="myCtrl">
  <select
    ng-model="myFilter"
    ng-options="value.label for value in myFilters">
        <option>--</option>
  </select>
  <div>
    myFilter: {{myFilter.filter}}
  </div>
</div>

그리고 당신의 JS는

function myCtrl($scope) {
  $scope.myFilters = [{
        "filter": {pay_status : 'Paid'},
        "label": "Paid Work"
    },{
        "filter": {pay_status : 'Volunteer'},
        "label": "Volunteer Work"
    },{
        "filter": {opento : 'Undergraduates'},
        "label": "Undergraduates"
    },{
        "filter": {opento : 'Postgraduates'},
        "label": "Postgraduates"
    }];

};

바이올린을보십시오 :-http: //jsfiddle.net/vxvcbrxs/

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

angularjs의 ng-options를 사용하여 선택 상자에서 여러 옵션을 선택하십시오.

분류에서Dev

각도를 사용하는 선택 상자의 동적 옵션

분류에서Dev

AngularJS-선택 태그에서 명시 적 ng-repeat를 사용하여 추가 된 추가 공백 옵션

분류에서Dev

Angularjs-ng-options를 사용하여 선택 상자 채우기

분류에서Dev

각도에서 ng-repeat를 사용하여 마지막 옵션에 선택한 사항 적용

분류에서Dev

angularjs의 선택 상자 옵션 내에서 ng-translate하는 방법

분류에서Dev

Angularjs ng-repeat 여러 선택 상자에서 선택한 옵션 제거

분류에서Dev

angularjs 및 ng-repeat를 사용하여 다른 선택 태그에서 옵션을 선택하여 선택 태그를 비활성화했습니다.

분류에서Dev

ng-select를 사용하여 선택한 옵션 수 표시

분류에서Dev

ng-options를 사용하여 생성 된 선택의 모델 및 선택한 옵션 업데이트

분류에서Dev

AngularJS를 사용하는 크롬 브라우저에서 ng-click을 통한 옵션 선택이 작동하지 않습니다.

분류에서Dev

AngularJS에서 옵션 선택과 함께 ng-options 사용

분류에서Dev

PHP를 사용하여 선택 상자에 대한 옵션 만들기

분류에서Dev

선택에 따라 선택 옵션 가져 오기를 사용하여 DIV의 동적 추가

분류에서Dev

ng-model 값이 다르기 때문에 ng-select를 사용하여 옵션을 선택하는 문제

분류에서Dev

AngularJS 1.x의 한 선택 상자에서 다른 선택 상자에서 선택한 옵션을 제거하는 사용자 지정 필터

분류에서Dev

angularjs로 선택에서 ng-options를 사용할 때 옵션 값을 설정하는 방법

분류에서Dev

iMacros를 사용하여 목록의 위치에 따라 선택 옵션 설정

분류에서Dev

ng-options를 사용할 때 선택에 여러 ng-if 옵션을 사용할 수없는 이유

분류에서Dev

Reactjs를 사용하여 옵션 선택

분류에서Dev

AngularJS에서 "ng-options"를 사용하여 옵션 채우기

분류에서Dev

SFINAE를 사용하여 C ++ 11의 여러 옵션에서 생성자를 선택하는 방법

분류에서Dev

jquery를 사용하여 선택 상자 옵션에 데이터를 표시하는 방법

분류에서Dev

Angular.js에서 ng-repeat를 사용하여 기본 선택된 라디오 버튼의 옵션을 설정할 수 없습니다.

분류에서Dev

jQuery를 사용하여 텍스트 상자 입력에 따라 드롭 다운 목록에서 옵션 선택

분류에서Dev

반응에서 사용자가 선택한 옵션의 텍스트를 선택하여 텍스트를 복사하는 방법을 선택합니다.

분류에서Dev

Javascript를 사용하여 HTML 선택 상자에 옵션을 추가 할 때 오류 발생

분류에서Dev

사용자가 선택한 옵션에 따라 JQuery를 사용하여 양식을 제출하는 방법

분류에서Dev

Angularjs에서 ng-click을 사용하여 개체의 자식 찾기

Related 관련 기사

  1. 1

    angularjs의 ng-options를 사용하여 선택 상자에서 여러 옵션을 선택하십시오.

  2. 2

    각도를 사용하는 선택 상자의 동적 옵션

  3. 3

    AngularJS-선택 태그에서 명시 적 ng-repeat를 사용하여 추가 된 추가 공백 옵션

  4. 4

    Angularjs-ng-options를 사용하여 선택 상자 채우기

  5. 5

    각도에서 ng-repeat를 사용하여 마지막 옵션에 선택한 사항 적용

  6. 6

    angularjs의 선택 상자 옵션 내에서 ng-translate하는 방법

  7. 7

    Angularjs ng-repeat 여러 선택 상자에서 선택한 옵션 제거

  8. 8

    angularjs 및 ng-repeat를 사용하여 다른 선택 태그에서 옵션을 선택하여 선택 태그를 비활성화했습니다.

  9. 9

    ng-select를 사용하여 선택한 옵션 수 표시

  10. 10

    ng-options를 사용하여 생성 된 선택의 모델 및 선택한 옵션 업데이트

  11. 11

    AngularJS를 사용하는 크롬 브라우저에서 ng-click을 통한 옵션 선택이 작동하지 않습니다.

  12. 12

    AngularJS에서 옵션 선택과 함께 ng-options 사용

  13. 13

    PHP를 사용하여 선택 상자에 대한 옵션 만들기

  14. 14

    선택에 따라 선택 옵션 가져 오기를 사용하여 DIV의 동적 추가

  15. 15

    ng-model 값이 다르기 때문에 ng-select를 사용하여 옵션을 선택하는 문제

  16. 16

    AngularJS 1.x의 한 선택 상자에서 다른 선택 상자에서 선택한 옵션을 제거하는 사용자 지정 필터

  17. 17

    angularjs로 선택에서 ng-options를 사용할 때 옵션 값을 설정하는 방법

  18. 18

    iMacros를 사용하여 목록의 위치에 따라 선택 옵션 설정

  19. 19

    ng-options를 사용할 때 선택에 여러 ng-if 옵션을 사용할 수없는 이유

  20. 20

    Reactjs를 사용하여 옵션 선택

  21. 21

    AngularJS에서 "ng-options"를 사용하여 옵션 채우기

  22. 22

    SFINAE를 사용하여 C ++ 11의 여러 옵션에서 생성자를 선택하는 방법

  23. 23

    jquery를 사용하여 선택 상자 옵션에 데이터를 표시하는 방법

  24. 24

    Angular.js에서 ng-repeat를 사용하여 기본 선택된 라디오 버튼의 옵션을 설정할 수 없습니다.

  25. 25

    jQuery를 사용하여 텍스트 상자 입력에 따라 드롭 다운 목록에서 옵션 선택

  26. 26

    반응에서 사용자가 선택한 옵션의 텍스트를 선택하여 텍스트를 복사하는 방법을 선택합니다.

  27. 27

    Javascript를 사용하여 HTML 선택 상자에 옵션을 추가 할 때 오류 발생

  28. 28

    사용자가 선택한 옵션에 따라 JQuery를 사용하여 양식을 제출하는 방법

  29. 29

    Angularjs에서 ng-click을 사용하여 개체의 자식 찾기

뜨겁다태그

보관