AngularJS로 옵션 선택에서 빈 옵션 제거

AngularJS로 옵션 선택에서 빈 옵션 제거

---

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/

You needed to set your initial model value to the actual object:

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

And update your select to look like this:

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

---

Another method to resolve is by making use of: $first in ng-repeat

Usage:

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

References:

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

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

Cheers

---

It is kind of a workaround but works like a charm. Just add <option value="" style="display: none"></option> as a filler. Like in:

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

---

There are multiple ways like -

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

Or

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

---

If you just want to remove the blank space use ng-show and you are done! No need to initialize value in JS.

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

---

Change your code like this. You forget about the value inside option. Before you assign the ng-model. It must have a value. Only then it doesn't get the undefined value.

<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'}
      ];
 });

---

Use ng-value instead of value.

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

and then in html file should be like:

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

---

For me the answer to this question was using <option value="" selected hidden /> as it was proposed by @RedSparkle plus adding ng-if="false" to work in IE.

So my full option is (has differences with what I wrote before, but this does not matter because of ng-if):

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

---

Also check whether you have any falsy value or not. Angularjs will insert an empty option if you do have falsy value. I struggled for 2 days just due to falsy value. I hope it will be helpful for someone.

I had options as [0, 1] and initially I was set the model to 0 due to that it was inserted empty option. Workaround for this was ["0" , "1"].

참고URL : https://stackoverflow.com/questions/20738953/remove-blank-option-from-select-option-with-angularjs