[angularjs] AngularJS로 옵션 선택에서 빈 옵션 제거

Program / 글쓴이

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>`