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속성을 로 변경하십시오.

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어떤의 city온 cities목록은 부하에 선택 자동 수 있습니다.

여기에 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-by및 ng-options사용하지 않고 ng-init나 ng-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 & 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에서 찾습니다. 이것이 다른 누군가를 돕기를 바랍니다.

아래 코드를 사용하여 모델에서 선택한 옵션을 채우십시오.

<select id="roomForListing" ng-model="selectedRoom.roomName" >

<option ng-repeat="room in roomList" title="{{room.roomName}}" ng-selected="{{room.roomName == selectedRoom.roomName}}" value="{{room.roomName}}">{{room.roomName}}</option>

</select>

사용 가능한 옵션 수에 따라 값을 배열에 넣고 다음과 같이 옵션을 자동으로 채울 수 있습니다.

<select ng-model="somethingHere.values" ng-options="values for values in [5,4,3,2,1]">
   <option value="">Pick a Number</option>
</select>

필자의 경우 옵션을 선택하도록 사용자에게 알리기 위해 초기 값을 삽입해야했기 때문에 아래 코드를 좋아합니다.

<select ...
    <option value="" ng-selected="selected">Select one option</option>
</select>

빈 문자열 (null)의 값이! = 인 옵션을 시도했을 때 옵션이 각도로 대체되었지만 (null 값이있는) 이와 같은 옵션을 넣을 때이 옵션이있는 선택 항목이 나타납니다.

나의 나쁜 영어에 의해 미안하다.

selectwith 사용 ngOptions및 기본값 설정 :

자세한 사용법 예 는 ngOptions 설명서를 참조하십시오 ngOptions.

angular.module('defaultValueSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.data = {
    availableOptions: [
      {id: '1', name: 'Option A'},
      {id: '2', name: 'Option B'},
      {id: '3', name: 'Option C'}
    ],
    selectedOption: {id: '2', name: 'Option B'} //This sets the default value of the select in the ui
    };
}]);

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<body ng-app="defaultValueSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="mySelect">Make a choice:</label>
    <select name="mySelect" id="mySelect"
      ng-options="option.name for option in data.availableOptions track by option.id"
      ng-model="data.selectedOption"></select>
  </form>
  <hr>
  <tt>option = {{data.selectedOption}}</tt><br/>
</div>

plnkr.co

SELECT각도 데이터 바인딩을 사용하는 HTML요소에 대한 공식 문서 .

구문 분석 / 형식화 select를 통해 문자열이 아닌 값에 바인딩 ngModel:

(function(angular) {
  'use strict';
angular.module('nonStringSelect', [])
  .run(function($rootScope) {
    $rootScope.model = { id: 2 };
  })
  .directive('convertToNumber', function() {
    return {
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        ngModel.$parsers.push(function(val) {
          return parseInt(val, 10);
        });
        ngModel.$formatters.push(function(val) {
          return '' + val;
        });
      }
    };
  });
})(window.angular);

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
<body ng-app="nonStringSelect">
  <select ng-model="model.id" convert-to-number>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
{{ model }}
</body>

plnkr.co

다른 예 :

angular.module('defaultValueSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.availableOptions = [
     { name: 'Apple', value: 'apple' }, 
     { name: 'Banana', value: 'banana' }, 
     { name: 'Kiwi', value: 'kiwi' }
   ];
   $scope.data = {selectedOption : $scope.availableOptions[1].value};
}]);

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<body ng-app="defaultValueSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <select ng-model="data.selectedOption" required ng-options="option.value as option.name for option in availableOptions"></select>
  </form>  
  </div>
</body>

jsfiddle

이것은 나를 위해 일했습니다.

<select ng-model="somethingHere" ng-init="somethingHere='Cool'">
    <option value="Cool">Something Cool</option>
    <option value="Else">Something Else</option>
</select>

제 경우에는 기본값이 양식마다 다르기 때문에. select 태그에 사용자 정의 속성을 추가합니다.

 <select setSeletected="{{data.value}}">
      <option value="value1"> value1....
      <option value="value2"> value2....
       ......

지시문에서 값을 확인하는 스크립트를 작성하고 각도가 값을 채울 때 해당 값을 가진 옵션을 선택된 것으로 설정합니다.

 .directive('setSelected', function(){
    restrict: 'A',
    link: (scope, element, attrs){
     function setSel=(){
     //test if the value is defined if not try again if so run the command
       if (typeof attrs.setSelected=='undefined'){             
         window.setTimeout( function(){setSel()},300) 
       }else{
         element.find('[value="'+attrs.setSelected+'"]').prop('selected',true);          
       }
     }
    }

  setSel()

})

적어도 coffescript에서 이것을 번역했습니다. 적어도 구멍이 아니라면 그것의 jist는 정확합니다.

가장 간단한 방법은 아니지만 값이 다를 때 완료하십시오.

에 대한 응답으로 벤 레 쉬는의 대답은 ,이 라인이 있어야한다

ng-init="somethingHere = somethingHere || options[0]" 

대신에

ng-init="somethingHere = somethingHere || options[0].value" 

그건,

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

ng-selected="true"다음과 같이 간단히 사용하십시오 .

<select ng-model="myModel">
        <option value="a" ng-selected="true">A</option>
        <option value="b">B</option>
</select>

컨트롤러에서 모델을 설정하겠습니다. 그러면 선택이 기본적으로 해당 값으로 설정됩니다. 예 : html :

<select ng-options="..." ng-model="selectedItem">

각도 컨트롤러 (자원 사용) :

myResource.items(function(items){
  $scope.items=items;
  if(items.length>0){
     $scope.selectedItem= items[0];
//if you want the first. Could be from config whatever
  }
});

이것은 나를 위해 일하는

ng-selected="true" 

ng-options렌더링 에 사용 하는 경우 optionng-modal과 동일한 값을 갖는 것보다 기본적으로 드롭 다운이 선택됩니다. 예를 고려하십시오.

<select ng-options="list.key as list.name for list in lists track by list.id" ng-model="selectedItem">

따라서 list.key및 값이 같은 옵션 selectedItem이 기본적으로 선택되어 있습니다.

선택할 수없는 기본“Please Select”가 필요했습니다. 또한 기본적으로 선택된 옵션을 조건부로 설정할 수 있어야했습니다.

다음과 같은 간단한 방법으로이 작업을 수행했습니다. JS 코드 : //이“2를 뒤집어 기본“선택하십시오”텍스트를 사용하여 선택한 기본값 또는 기본값을 테스트하십시오. //$scope.defaultOption = 0; $ scope.defaultOption = {키 : '3', 값 : '옵션 3'};

$scope.options = [
   { key: '1', value: 'Option 1' },
   { key: '2', value: 'Option 2' },
   { key: '3', value: 'Option 3' },
   { key: '4', value: 'Option 4' }
];

getOptions();

function getOptions(){
    if ($scope.defaultOption != 0)
    { $scope.options.selectedOption = $scope.defaultOption; }
}

HTML :

<select name="OptionSelect" id="OptionSelect" ng-model="options.selectedOption" ng-options="item.value for item in options track by item.key">
<option value="" disabled selected style="display: none;"> -- Please Select -- </option>
</select>
<h1>You selected: {{options.selectedOption.key}}</h1>         

나는 이것이 비슷한 요구 사항을 가진 다른 사람에게 도움이되기를 바랍니다.

"Please Select"는 Joffrey Outtier의 답변을 통해 달성 되었습니다 .

날짜 부분을 초기화하는 대신 무언가가있는 경우 ng-init()컨트롤러에서 선언하여 HTML 상단에서 사용할 수 있습니다. 이 함수는 컨트롤러의 생성자처럼 작동하며 여기에서 변수를 시작할 수 있습니다.

angular.module('myApp', [])
 .controller('myController', ['$scope', ($scope) => {
   $scope.allOptions = [
     { name: 'Apple', value: 'apple' }, 
     { name: 'Banana', value: 'banana' }
   ];
   $scope.myInit = () => {
      $scope.userSelected = 'apple'
      // Other initiations can goes here..
   }
}]);


<body ng-app="myApp">
  <div ng-controller="myController" ng-init="init()">
    <select ng-model="userSelected" ng-options="option.value as option.name for option in allOptions"></select>
   </div>
</body>

    <!--
    Using following solution you can set initial 
default value at controller as well as after change option selected value shown as default.
    -->
    <script type="text/javascript">
      function myCtrl($scope)
        {
          //...
            $scope.myModel=Initial Default Value; //set default value as required
          //..
        }
    </script>
    <select ng-model="myModel" 
                ng-init="myModel= myModel"
                ng-options="option.value as option.name for option in options">
        </select>

각도 컨트롤러에서 이것을 시도하십시오 ...

$ somethingHere = {이름 : '뭔가 멋진'};

값을 설정할 수 있지만 복잡한 유형을 사용하고 각도에서 키 / 값을 검색하여 설정합니다.

작동하지 않는 경우 다음을 시도하십시오. ng-options = "option.value as option.name as option in option track by option.name"

가장 쉬운 방법은

 ng-selected="$first"