각도가 있는 옵션 선택에서 공백 옵션 제거JS

각도가 있는 옵션 선택에서 공백 옵션 제거JS

저는 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 데모입니다.

참고: select에 angularjs가 빈 옵션을 포함하는 이유는 무엇입니까?

공허함option에 의해 참조된 값이 생성ng-model전달된 옵션 세트에 존재하지 않습니다.ng-options이는 우발적인 모델 선택을 방지하기 위해 발생합니다.각진JS는 초기 모형이 정의되지 않았거나 옵션 집합에 포함되지 않았음을 확인할 수 있으며 모델 값을 자체적으로 결정하려고 하지 않습니다.

즉, 빈 옵션은 유효한 모델이 선택되지 않았음을 의미합니다(유효하다는 의미: 옵션 세트에서).이 빈 옵션을 제거하려면 올바른 모델 값을 선택해야 합니다.

코드를 이렇게 변경합니다.

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;

위의 제안은 모두 유효하지만, 처음에 화면에 들어갈 때 빈 선택(플레이스 홀더 텍스트 표시)이 필요할 수 있습니다.따라서 Select 박스가 목록의 처음(또는 마지막)에 빈 선택 항목을 추가하지 않도록 하기 위해 다음 방법을 사용합니다.

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

다른 해결 방법은 in을 사용하는 것입니다.ng-repeat

사용방법:

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

참고 자료:

ng Selected : 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>`

코드를 이렇게 바꾸세요.Inside 옵션에 대한 가치를 잊어버렸습니다.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'}
      ];
 });

값 대신 ng-value를 사용합니다.

$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에 더해 @RedSparkle을 추가하고 @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는 빈 옵션을 삽입합니다.나는 단지 가짜 값 때문에 이틀 동안 고생했다.누군가에게 도움이 되었으면 좋겠어요.

옵션이 [0, 1]로 되어 있었는데, 처음에는 빈 옵션이 삽입되어 있기 때문에 0으로 설정되어 있었습니다.이 문제의 회피책은 [0], [1]이었습니다.

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