Tôi mới sử dụng AngularJS. Tôi đã tìm kiếm rất nhiều, nhưng nó không giải quyết được vấn đề của tôi.

Tôi nhận được một tùy chọn trống lần đầu tiên trong hộp chọn.

Đây là mã HTML của tôi

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

Nhưng nó dường như không hoạt động. Làm cách nào để giải quyết vấn đề này? Đây là JSFiddle Demo

Để tham khảo: Tại sao anglejs lại bao gồm tùy chọn trống trong vùng chọn ?

Khoảng trống optionđược tạo ra khi một giá trị được tham chiếu bởi ng-modelkhông tồn tại trong một tập hợp các tùy chọn được chuyển đến ng-options. Điều này xảy ra để ngăn việc lựa chọn mô hình ngẫu nhiên: AngularJS có thể thấy rằng mô hình ban đầu hoặc không được xác định hoặc không có trong tập hợp các tùy chọn và không muốn tự quyết định giá trị mô hình.

Tóm lại: tùy chọn trống có nghĩa là không có mô hình hợp lệ nào được chọn (ý tôi là hợp lệ: từ tập hợp các tùy chọn). Bạn cần chọn một giá trị mô hình hợp lệ để loại bỏ tùy chọn trống này.

Thay đổi mã của bạn như thế này

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>

Làm việc JSFiddle Demo

CẬP NHẬT (ngày 31 tháng 12 năm 2015)

Nếu bạn không muốn đặt giá trị mặc định và muốn xóa tùy chọn trống,

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

Và trong JS không cần khởi tạo giá trị.

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

Trong khi tất cả các đề xuất ở trên đang hoạt động, đôi khi tôi cần có một lựa chọn trống (hiển thị văn bản giữ chỗ) khi vào màn hình lần đầu. Vì vậy, để ngăn hộp chọn thêm lựa chọn trống này vào đầu (hoặc đôi khi ở cuối) danh sách của tôi, tôi đang sử dụng thủ thuật này:

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

Bây giờ bạn đã xác định tùy chọn trống này, vì vậy hộp chọn rất vui, nhưng bạn giữ nó ẩn.

Đây là một fiddle cập nhật: http://jsfiddle.net/UKySp/

Bạn cần đặt giá trị mô hình ban đầu của mình thành đối tượng thực tế:

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

Và cập nhật lựa chọn của bạn để trông giống như sau:

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

Một phương pháp khác để giải quyết là sử dụng: $firstinng-repeat

Sử dụng:

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

Tài liệu tham khảo :

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

$ đầu tiên : https://docs.angularjs.org/api/ng/directive/ngRepeat

Chúc mừng

Có nhiều cách như -

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

Hoặc là

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

Đó là một cách giải quyết nhưng hoạt động như một sự quyến rũ. Chỉ cần thêm <option value="" style="display: none"></option>như một chất độn. Giống như trong:

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

Nếu bạn chỉ muốn xóa khoảng trống, hãy sử dụng ng-show và bạn đã hoàn tất! Không cần khởi tạo giá trị trong JS.

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

Thay đổi mã của bạn như thế này. Bạn quên mất giá trị bên trong tùy chọn. Trước khi bạn chỉ định ng-model. Nó phải có một giá trị. Chỉ khi đó nó không nhận được giá trị không xác định.

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

Sử dụng ng-value thay vì value .

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

và sau đó trong tệp html sẽ giống như:

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

Đối với tôi, câu trả lời cho câu hỏi này đã được sử dụng <option value="" selected hidden />như nó được đề xuất bởi @RedSparkle cộng với việc thêm ng-if="false"vào hoạt động trong IE.

Vì vậy, tùy chọn đầy đủ của tôi là (có sự khác biệt với những gì tôi đã viết trước đây, nhưng điều này không quan trọng vì ng-if):

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

Cuối cùng nó đã làm việc cho tôi.

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

Đồng thời kiểm tra xem bạn có bất kỳ giá trị giả mạo nào hay không. Angularjs sẽ chèn một tùy chọn trống nếu bạn có giá trị giả. Tôi đã vật lộn trong 2 ngày chỉ vì giá trị giả. Tôi hy vọng nó sẽ hữu ích cho ai đó.

Tôi có các tùy chọn là [0, 1] và ban đầu tôi được đặt mô hình thành 0 do nó được chèn tùy chọn trống. Giải pháp cho vấn đề này là ["0", "1"].