AngularJS를 처음 사용합니다. 검색을 많이했는데 문제가 해결되지 않습니다.

선택 상자에 처음으로 빈 옵션이 표시됩니다.

내 HTML 코드는 다음과 같습니다.

<div ng-app="MyApp1">
    <div ng-controller="MyController">
        <input type="text" ng-model="feed.name" placeholder="Name" />
        <select ng-model="feed.config">
            <option ng-repeat="template in configs">{{template.name}}</option>
        </select>
    </div>
</div>

JS

var MyApp=angular.module('MyApp1',[])
MyApp.controller('MyController', function($scope) {
    $scope.feed = {};

      //Configuration
      $scope.configs = [
                                 {'name': 'Config 1',
                                  'value': 'config1'},
                                 {'name': 'Config 2',
                                  'value': 'config2'},
                                 {'name': 'Config 3',
                                  'value': 'config3'}
                               ];
      //Setting first option as selected in configuration select
      $scope.feed.config = $scope.configs[0].value;
});

그러나 작동하지 않는 것 같습니다. 이 문제를 어떻게 해결할 수 있습니까? 다음은 JSFiddle 데모입니다.

참고로 angularjs는 왜 select에 빈 옵션을 포함 합니까?

에서 option참조하는 값 ng-model이에 전달 된 옵션 집합에 존재하지 않는 경우 빈 값이 생성됩니다 ng-options. 이것은 우발적 인 모델 선택을 방지하기 위해 발생합니다. AngularJS는 초기 모델이 정의되지 않았거나 옵션 세트에없는 것을 확인할 수 있으며 자체적으로 모델 값을 결정하고 싶지 않습니다.

간단히 말해서, 빈 옵션은 유효한 모델이 선택되지 않았 음을 의미합니다 (유효하다는 의미 : 옵션 집합에서). 이 빈 옵션을 제거하려면 유효한 모델 값을 선택해야합니다.

다음과 같이 코드를 변경하십시오.

var MyApp=angular.module('MyApp1',[])
MyApp.controller('MyController', function($scope) {
  $scope.feed = {};

  //Configuration
  $scope.feed.configs = [
    {'name': 'Config 1',
     'value': 'config1'},
    {'name': 'Config 2',
     'value': 'config2'},
    {'name': 'Config 3',
     'value': 'config3'}
  ];
  //Setting first option as selected in configuration select
  $scope.feed.config = $scope.feed.configs[0].value;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="MyApp1">
  <div ng-controller="MyController">
    <input type="text" ng-model="feed.name" placeholder="Name" />
    <!-- <select ng-model="feed.config">
<option ng-repeat="template in configs">{{template.name}}</option>
</select> -->
    <select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
    </select>
  </div>
</div>

작동하는 JSFiddle 데모

업데이트 (2015 년 12 월 31 일)

기본값을 설정하지 않고 빈 옵션을 제거하려면

<select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
      <option value="" selected="selected">Choose</option>
</select>

그리고 JS에서는 값을 초기화 할 필요가 없습니다.

$scope.feed.config = $scope.feed.configs[0].value;

위의 모든 제안이 작동하는 동안 처음 화면에 들어갈 때 빈 선택 (자리 표시 자 텍스트 표시)이 필요한 경우가 있습니다. 따라서 선택 상자가 내 목록의 시작 부분 (또는 끝 부분에)에이 빈 선택을 추가하지 않도록하기 위해이 트릭을 사용하고 있습니다.

HTML 코드

<div ng-app="MyApp1">
    <div ng-controller="MyController">
        <input type="text" ng-model="feed.name" placeholder="Name" />
        <select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs" placeholder="Config">
            <option value="" selected hidden />
        </select>
    </div>
</div>

이제이 빈 옵션을 정의 했으므로 선택 상자는 만족 스럽지만 숨겨진 상태로 유지합니다.

다음은 업데이트 된 바이올린입니다. http://jsfiddle.net/UKySp/

초기 모델 값을 실제 개체로 설정해야했습니다.

$scope.feed.config = $scope.configs[0];

다음과 같이 선택 항목을 업데이트하십시오.

<select ng-model="feed.config" ng-options="item.name for item in configs">

해결하는 또 다른 방법을 활용하는 것입니다 : $first에ng-repeat

용법:

<select ng-model="feed.config">
    <option ng-repeat="template in configs" ng-selected="$first">{{template.name}}</option>
</select>

참고 문헌 :

ngSelected : https://docs.angularjs.org/api/ng/directive/ngSelected

$ first : https://docs.angularjs.org/api/ng/directive/ngRepeat

건배

다음과 같은 여러 가지 방법이 있습니다.

<select ng-init="feed.config = options[0]" ng-model="feed.config"
        ng-options="template.value as template.name for template in feed.configs">
</select>

또는

$scope.feed.config = $scope.configs[0].name;

일종의 해결 방법이지만 매력처럼 작동합니다. <option value="" style="display: none"></option>필러로 추가하십시오 . 다음과 같이 :

<select size="4" ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
       <option value="" style="display: none"></option>
</select>

공백을 제거하려면 ng-show를 사용하면됩니다. JS에서 값을 초기화 할 필요가 없습니다.

<select ng-model="SelectedStatus" ng-options="x.caption for x in statusList">
    <option value="" ng-show="false"></option>
</select>`

이와 같이 코드를 변경하십시오. 옵션 내부의 값을 잊어 버렸습니다. ng-model을 할당하기 전에. 값이 있어야합니다. 그래야만 정의되지 않은 값을 얻지 못합니다.

<div ng-app="MyApp1">
<div ng-controller="MyController">
    <input type="text" ng-model="feed.name" placeholder="Name" />
     <select ng-model="feed">
        <option ng-repeat="template in configs" value="template.value">{{template.name}}    
 </option>
    </select>
    </div>
 </div>

JS

 var MyApp=angular.module('MyApp1',[])
 MyApp.controller('MyController',function($scope) {  
      $scope.feed = 'config1';      
      $scope.configs = [
         {'name': 'Config 1', 'value': 'config1'},
         {'name': 'Config 2', 'value': 'config2'},
         {'name': 'Config 3', 'value': 'config3'}
      ];
 });

사용 겨 값 대신 값을 .

$scope.allRecs = [{"text":"hello"},{"text":"bye"}];
$scope.X = 0;

그런 다음 html 파일에서 다음과 같아야합니다.

<select ng-model="X">  
     <option ng-repeat="oneRec in allRecs track by $index" ng-value="$index">{{oneRec.text}}</option>
</select>

나를 위해이 질문에 대한 대답 <option value="" selected hidden />은 @RedSparkle이 제안한대로 사용 하고 ng-if="false"IE에서 작업을 추가 했습니다.

그래서 내 모든 옵션은 (이전에 작성한 것과 다르지만 ng-if 때문에 중요하지 않습니다)입니다.

<option value="" ng-if="false" disabled hidden></option>

마침내 그것은 나를 위해 일했습니다.

<select ng-init="mybasketModel = basket[0]" ng-model="mybasketModel">
        <option ng-repeat="item in basket" ng-selected="$first">{{item}}</option>
</select>

또한 거짓 값이 있는지 여부도 확인하십시오. Angularjs는 잘못된 값이있는 경우 빈 옵션을 삽입합니다. 허위 가치 때문에 2 일 동안 고생했습니다. 누군가에게 도움이되기를 바랍니다.

나는 옵션을 [0, 1]로 설정했고 처음에는 빈 옵션이 삽입 되었기 때문에 모델을 0으로 설정했습니다. 이에 대한 해결 방법은 [ "0", "1"]입니다.