AngularJS 및 ng-repeat를 사용하여 선택 초기화

133

AngularJS 1.1.5에서 ng-repeat를 사용하여 미리 채워진 옵션으로 시작하기 위해 선택 상자를 얻으려고합니다. 대신 선택은 항상 선택된 항목으로 시작합니다. 또한 빈 옵션이 있으며 원하지 않습니다. 나는 아무것도 선택되지 않은 부작용이 있다고 생각합니다.

ng-repeat 대신 ng-options를 사용 하여이 작업을 수행 할 수 있지만이 경우에는 ng-repeat를 사용하고 싶습니다. 내 좁혀진 예제는 그것을 보여주지 않지만 각 옵션의 제목 속성을 설정하고 싶습니다. 내가 아는 한 ng-options를 사용하여 그렇게 할 수있는 방법이 없습니다.

나는 이것이 일반적인 AngularJs 범위 / 프로토 타입 상속 문제와 관련이 있다고 생각하지 않습니다. Batarang에서 검사 할 때 적어도 분명한 것이 보이지 않습니다. 또한 UI를 사용하여 선택 항목에서 옵션을 선택하면 모델이 올바르게 업데이트됩니다.

HTML은 다음과 같습니다.

<body ng-app ng-controller="AppCtrl">
    <div>
        Operator is: {{filterCondition.operator}}
    </div>
    <select ng-model="filterCondition.operator">
       <option 
           ng-repeat="operator in operators" 
           value="{{operator.value}}"
       >
           {{operator.displayName}}
       </option>
    </select>
</body>

그리고 자바 스크립트 :

function AppCtrl($scope) {

    $scope.filterCondition={
        operator: 'eq'
    }

    $scope.operators = [
        {value: 'eq', displayName: 'equals'},
        {value: 'neq', displayName: 'not equal'}
     ]
}

이것에 대한 JS 피들 : http://jsfiddle.net/coverbeck/FxM3B/2/

javascript angularjs

— 찰스 오
소스

1

ngRepeat를 사용하여이를 수행 할 수있는 확실한 방법이 없기 때문에 ngOption이 작성되었습니다. ngRepeat는 옵션이 선택된 후 풀립니다. 옵션에서 ngSelect 설정을 시도해 보셨습니까

— TheSharpieOne

예! ngSelected가 효과가있었습니다! 업데이트 된 JsFiddle을 게시하겠습니다.

— Charles O.

AngualrJS 1.2에서이 코드는 다르게 작동합니다. 비어있는 <OPTION> 요소를 새로 만들지는 않지만 목록 상자에서 첫 번째 옵션 만 선택할 수 있습니다. 여기에서

— VitalyB

226

확인. 올바른 방법을 사용하지 않으려면 지시문에 대해 사전 선택 작업을 수행하기 위해 조건 확인 논리와 함께 속성을 ng-options추가 할 수 있습니다 .ng-selectedoption

<select ng-model="filterCondition.operator">
    <option ng-selected="{{operator.value == filterCondition.operator}}"
            ng-repeat="operator in operators"
            value="{{operator.value}}">
      {{operator.displayName}}
    </option>
</select>

Working Demo

— zs2020
소스

37

스스로 알아 낸 다음 모범을 보이기 때문에 크레딧을드립니다. ng-options가 "올바른 방법"이라는 귀하의 의견에는 동의하지 않습니다. :) 나는 항상 ng-options를 직접 사용했지만 ng-options가 지원하지 않는 작은 작업을 수행해야했습니다. 그리고 Angular 의사는 반복을 판단 할 수 있다고 말합니다. 감사합니다, Charles

— Charles O.

고맙게도 일부 옵션을 비활성화하는 쉬운 방법이었습니다.

— 도리안

11

ng-options는 사용 사례가 사용자에게 적합한 경우에만 정확합니다. option / optgroup 필드 등에 추가 속성 / 클래스가 필요할 수 있습니다.

— mystrdat

6

"올바른 방법"은 때때로 작동하지 않습니다 (예 : 옵션 이름을 채우는 문자열을 번역하려는 경우)

— btk

11

ng-selected 표현식에는 {{}}이 없어야한다고 생각합니다. ng-selected = "operator.value == filterCondition.operator"

— mvermand

35

select 태그의 경우 angular는 ng-options 지시문을 제공합니다. 옵션을 설정하고 기본값을 설정하는 특정 프레임 워크를 제공합니다. 예상대로 작동하는 ng-options를 사용하여 업데이트 된 바이올린은 다음과 같습니다. http://jsfiddle.net/FxM3B/4/

업데이트 된 HTML (코드는 동일하게 유지됨)

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator" ng-options="operator.value as operator.displayName for operator in operators">
</select>
</body>

— 제레미 리크 니스
소스

3

안녕하세요 Jeremy-ng-options 없이이 작업을 수행하려고합니다. 내 질문에 말하고 Shaun에 대답하면서 각 옵션에 title 속성을 설정하고 싶습니다. 내가 아는 한 ng-options로는 그렇게 할 수 없습니다. 감사합니다, Charles

— Charles O.

9

선택된 옵션을 지적 해 주신 TheSharpieOne 에게 감사합니다 . 그것이 주석이 아닌 답변으로 게시 된 경우, 나는 그 정답을 만들 것입니다.

작동하는 JSFiddle은 다음과 같습니다. http://jsfiddle.net/coverbeck/FxM3B/5/ .

또한 문제의 원인이 아니기 때문에 원래 게시물에서 생략 한 title 속성을 사용하도록 바이올린을 업데이트했습니다 (그러나 ng-options 대신 ng-repeat를 사용하려는 이유입니다) .

HTML :

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator">
   <option ng-repeat="operator in operators" title="{{operator.title}}" ng-selected="{{operator.value == filterCondition.operator}}" value="{{operator.value}}">{{operator.displayName}}</option>
</select>
</body>

JS :

function AppCtrl($scope) {

    $scope.filterCondition={
        operator: 'eq'
    }

    $scope.operators = [
        {value: 'eq', displayName: 'equals', title: 'The equals operator does blah, blah'},
        {value: 'neq', displayName: 'not equal', title: 'The not equals operator does yada yada'}
     ]
}

— 찰스 오
소스

의견으로 게시하여 죄송합니다. 나는 모범을 보이고 싶지 않았고 그것이 효과가 있다고 100 % 확신하지 못했습니다. 그냥 직감이었습니다.

— TheSharpieOne

9

앵귤러가 선택에 빈 옵션 요소를 주입한다는 사실은 기본적으로 바인딩 된 모델 객체가 초기화 될 때 빈 값으로 제공된다는 것입니다.

기본 옵션을 선택하려면 컨트롤러의 범위에서 설정할 수 있습니다.

$scope.filterCondition.operator = "your value here";

빈 옵션 자리 표시자를 원하면 이것이 효과적입니다.

<select ng-model="filterCondition.operator" ng-options="operator.id as operator.name for operator in operators">
  <option value="">Choose Operator</option>
</select>

— 암 마두
소스

2

이것은 좋지만 Angular는 빈 옵션을 만듭니다. 이것을 피하는 방법?

— MarceloBarbosa

1

제안한대로 ng-options를 사용해야하며 불행히도 배열이 문자열 배열이 아닌 한 배열 요소를 기본값으로 참조해야한다고 생각합니다.

http://jsfiddle.net/FxM3B/3/

자바 스크립트 :

function AppCtrl($scope) {


    $scope.operators = [
        {value: 'eq', displayName: 'equals'},
        {value: 'neq', displayName: 'not equal'}
     ]

    $scope.filterCondition={
        operator: $scope.operators[0]
    }
}

HTML :

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator.value}}</div>
<select ng-model="filterCondition.operator" ng-options="operator.displayName for operator in operators">
</select>
</body>

— shaunhusain
소스

왜 그런지 알고 있습니까? 설명서 ( docs.angularjs.org/api/ng.directive:select )에 따르면 문자열이 아닌 값에 바인딩 할 때 ng 옵션 만 사용하면됩니다. 내가 말했듯이 title 속성을 사용하고 ng-options로 할 수있는 방법이 없습니다. <option title = "이 선택에 대한 매우 긴 설명"...>과 같은 것입니다. 감사합니다.

— Charles O.

문서의 메모가 약간 불분명하고 실제로 모델에 문자열을 사용하고 옵션에 대한 문자열 배열을 사용해야한다는 것을 의미합니다. "title"속성을 사용하는 이유가 무엇인지 신경 쓰지 않으면 W3C w3schools.com/tags/tag_option.asp 에 표시 되지 않으며 실제로 사용하는 것을 기억할 수 없습니다. 설명을 객체에 저장 한 다음 모델이 바인딩 된 데이터이므로 여전히 해당 데이터를 검색 할 수 없습니까?

— shaunhusain

연결 한 W3C 페이지에서 Global Attributes (글로벌 속성) 링크를 클릭하면 title 요소가 옵션 요소에서 지원되는 것을 볼 수 있습니다. "도구 설명"텍스트를 표시하기 위해 title 속성을 사용하고 있으므로 옵션 위로 마우스를 가져 가면 옵션의 의미에 대한 더 큰 설명을 얻을 수 있습니다. 그것은 작은 일이지만 가능하다면 갖는 것이 좋을 것입니다.

— Charles O.

@CharlesO. 나는 당신처럼 정확하게하고 싶습니다. 문자열이 아닌 객체를 설정하지만 옵션 목록에서 제목을 사용하고 싶습니다. 이에 대한 해결책이 있습니까? 찾을 수없는 것 같습니다 ...

— Wilt

1

각도 재료에서 md-select 및 ng-repeating md-option ng-model-options="{trackBy: '$value.id'}"을 사용하는 경우이 펜에 표시된 md-select 태그 애쉬에 추가 할 수 있습니다

암호:

<md-select ng-model="user" style="min-width: 200px;" ng-model-options="{trackBy: '$value.id'}">
  <md-select-label>{{ user ? user.name : 'Assign to user' }}</md-select-label>
  <md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>

스 니펫 확장

— Japheth Ongeri-잉카 리 메바
소스