[javascript] Angular.js 선택 상자에서 기본 옵션을 사용하는 방법

Google을 검색했는데 이에 대한 내용을 찾을 수 없습니다.

이 코드가 있습니다.

<select ng-model="somethingHere"
        ng-options="option.value as option.name for option in options"
></select>

이런 데이터로

options = [{
   name: 'Something Cool',
   value: 'something-cool-value'
}, {
   name: 'Something Else',
   value: 'something-else-value'
}];

그리고 출력은 이와 같습니다.

<select ng-model="somethingHere"
        ng-options="option.value as option.name for option in options"
        class="ng-pristine ng-valid">

    <option value="?" selected="selected"></option>
    <option value="0">Something Cool</option>
    <option value="1">Something Else</option>
</select>

데이터의 첫 번째 옵션을 기본값으로 설정하여 어떻게 결과를 얻을 수 있습니까?

<select ng-model="somethingHere" ....>
    <option value="0" selected="selected">Something Cool</option>
    <option value="1">Something Else</option>
</select>



답변

당신은 간단하게 사용할 수있는 겨 – 초기화 같은를

<select ng-init="somethingHere = options[0]"
        ng-model="somethingHere"
        ng-options="option.name for option in options">
</select>


답변

당신이 확인하려면 반드시 당신의 $scope.somethingHere값이보기에이 초기화, 당신은 (합체 할 것입니다 때 덮어하지 않습니다 somethingHere = somethingHere || options[0].value) 당신의 값과 같이 NG를-초기화하기 :

<select ng-model="somethingHere"
        ng-init="somethingHere = somethingHere || options[0].value"
        ng-options="option.value as option.name for option in options">
</select>


답변

이 시도:

HTML

<select
    ng-model="selectedOption"
    ng-options="option.name for option in options">
</select>

자바 스크립트

function Ctrl($scope) {
    $scope.options = [
        {
          name: 'Something Cool',
          value: 'something-cool-value'
        },
        {
          name: 'Something Else',
          value: 'something-else-value'
        }
    ];

    $scope.selectedOption = $scope.options[0];
}

Plunker 여기 .

모델에 바인딩 할 값을 실제로 설정하려면 ng-options속성을 로 변경하십시오.

a
ng-options="option.value as option.name for option in options"

그리고 자바 스크립트

...
$scope.selectedOption = $scope.options[0].value;

또 다른 Plunker는 여기에 위의 고려.


답변

하나 개의 Srivathsa Harish Venkataramana 의해 답변을 언급track by 사실이에 대한 해결책이다!

여기에 사용하는 방법 Plunker (아래 링크)와 함께 예입니다 track by에서 선택 ng-options :

<select ng-model="selectedCity"
        ng-options="city as city.name for city in cities track by city.id">
  <option value="">-- Select City --</option>
</select>

경우이 selectedCity각도 범위에 정의하고있다되어 id있는 같은 값으로 속성을 id어떤의 citycities목록은 부하에 선택 자동 수 있습니다.

여기에 Plunker가 있습니다 :
http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview

자세한 내용은 소스 설명서를 참조하십시오 :
https://code.angularjs.org/1.3.15/docs/api/ng/directive/select


답변

‘track by’를 포함시킨 후에는 ng-options에서 다음과 같이 원하는 것을 얻을 수 있다고 생각합니다.

 <select ng-model="somethingHere" ng-options="option.name for option in options track by option.value" ></select>

문자열 목록을 객체 목록으로 바꾸려고 할 때 이것을 다음과 같이 변경하기 때문에 이렇게하는 것이 좋습니다.

 <select ng-model="somethingHere" ng-options="object.name for option in options track by object.id" ></select>

물론 여기에 속성 이름과 ID를 가진 객체가 있습니다. ‘as’는 ng-options를 표현하는 이러한 방식으로 사용되지 않습니다. 값을 설정하기 만하고


답변

수락 된 답변은 ng-init이지만 문서 는 가능한 경우 ng-init를 피하라고 말합니다.

아래 데모에서 볼 수 있듯이 ngInit의 유일한 적절한 사용법은 ngRepeat의 특수 속성에 대한 별칭을 지정하는 것입니다. 이 경우 이외에도 범위에서 값을 초기화하려면 ngInit 대신 컨트롤러를 사용해야합니다.

옵션 ng-repeat 대신에 사용할 수도 있습니다 ng-options. 을 사용하면 특수 속성 과 함께 ng-repeat사용할 수 있습니다 . 즉, $ index, $ odd, $ even로 코딩하지 않고도이 작업을 수행 할 수 있습니다.ng-selectedng-repeat

$first ng-repeat 특수 속성 중 하나입니다.

  <select ng-model="foo">
    <option ng-selected="$first" ng-repeat="(id,value) in myOptions" value="{{id}}">
      {{value}}
    </option>
  </select>

———————- 편집 —————-
이것이 효과가 있지만 @ mik-t를 선호합니다. 당신이 선택할 값이 무엇을 알고있을 때, 대답 https://stackoverflow.com/a/29564802/454252을 하는 용도 track-byng-options사용하지 않고 ng-initng-repeat.

이 답변은 어떤 값을 선택해야할지 몰라도 첫 번째 항목을 선택해야 할 때만 사용해야합니다. 예를 들어, 나는 자동 완성을 위해 이것을 항상 사용하고 있으며 항상 첫 번째 항목을 선택해야합니다.


답변

내 해결책은 html을 사용하여 기본 옵션을 하드 코딩하는 것이 었습니다. 이렇게 :

HAML에서 :

%select{'ng-model' => 'province', 'ng-options' => "province as province for province in summary.provinces", 'chosen' => "chosen-select", 'data-placeholder' => "BC & ON"}
  %option{:value => "", :selected => "selected"}
    BC &amp; ON

HTML에서 :

<select ng-model="province" ng-options="province as province for province in summary.provinces" chosen="chosen-select" data-placeholder="BC & ON">
  <option value="" selected="selected">BC &amp; ON</option>
</select>

기본 옵션이 내 API의 모든 값을 반환하기를 원하므로 빈 값이 있습니다. 내 실례 할게요 나는 이것이 OP의 질문에 대한 직접적인 대답이 아니라는 것을 알고 있지만 사람들은 이것을 Google에서 찾습니다. 이것이 다른 누군가를 돕기를 바랍니다.


댓글 달기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다