Tại sao AngularJS bao gồm một tùy chọn trống trong chọn?

Tôi đã làm việc với AngularJS trong vài tuần qua, và một điều thực sự làm phiền tôi là ngay cả sau khi thử tất cả các hoán vị hoặc cấu hình được xác định trong thông số kỹ thuật tại http://docs.angularjs.org/api/ng .directive: select , tôi vẫn nhận được một tùy chọn trống là phần tử con đầu tiên của phần tử select.

Đây là Ngọc:

select.span9(ng-model='form.type', required, ng-options='option.value as option.name for option in typeOptions');

Ở đây bộ điều khiển:

$scope.typeOptions = [
    { name: 'Feature', value: 'feature' },
    { name: 'Bug', value: 'bug' },
    { name: 'Enhancement', value: 'enhancement' }
];

Cuối cùng, đây là HTML được tạo:

<select ng-model="form.type" required="required" ng-options="option.value as option.name for option in typeOptions" class="span9 ng-pristine ng-invalid ng-invalid-required">
    <option value="?" selected="selected"></option>
    <option value="0">Feature</option>
    <option value="1">Bug</option>
    <option value="2">Enhancement</option>
</select>

Tôi cần làm gì để thoát khỏi nó?

PS: Mọi thứ cũng hoạt động mà không có điều này, nhưng nó trông có vẻ kỳ quặc nếu bạn sử dụng select2 mà không có nhiều lựa chọn.

Khoảng trống optionđược tạo khi 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 truyền cho ng-options. Điều này xảy ra để ngăn chặn lựa chọn mô hình tình cờ: AngularJS có thể thấy rằng mô hình ban đầu 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ự mình quyết định giá trị mô hình.

Nếu bạn muốn thoát khỏi tùy chọn trống, chỉ cần chọn một giá trị ban đầu trong bộ điều khiển của bạn, đại loại như:

$scope.form.type = $scope.typeOptions[0].value;

Đây là jsFiddle: http://jsfiddle.net/MTfRD/3/

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 (theo ý tôi 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ệ để thoát khỏi tùy chọn trống này.

Nếu bạn muốn có một giá trị ban đầu, hãy xem câu trả lời của @ pkozlowski.opensource, mà FYI cũng có thể được thực hiện trong chế độ xem (chứ không phải trong bộ điều khiển) bằng ng-init:

<select ng-model="form.type" required="required" ng-init="form.type='bug'"
  ng-options="option.value as option.name for option in typeOptions" >
</select>

Nếu bạn không muốn một giá trị ban đầu, "một phần tử được mã hóa cứng, với giá trị được đặt thành một chuỗi trống, có thể được lồng vào phần tử. Phần tử này sau đó sẽ biểu thị tùy chọn null hoặc" không được chọn ":

<select ng-model="form.type" required="required"
  ng-options="option.value as option.name for option in typeOptions" >
    <option style="display:none" value="">select a type</option>
</select>

Góc <1,4

Đối với bất kỳ ai ở ngoài đó coi "null" là giá trị hợp lệ cho một trong các tùy chọn (vì vậy hãy tưởng tượng rằng "null" là giá trị của một trong các mục trong typeOptions trong ví dụ bên dưới), tôi thấy cách đơn giản nhất để đảm bảo rằng tự động thêm vào Tùy chọn bị ẩn là sử dụng ng-if.

<select ng-options="option.value as option.name for option in typeOptions">
    <option value="" ng-if="false"></option>
</select>

Tại sao ng-if và không ng-ẩn? Bởi vì bạn muốn các bộ chọn css sẽ nhắm mục tiêu tùy chọn đầu tiên bên trong bên trên chọn để nhắm mục tiêu tùy chọn "thực", chứ không phải tùy chọn ẩn. Nó hữu ích khi bạn sử dụng thước đo góc để thử nghiệm e2e và (vì bất kỳ lý do gì) bạn sử dụng by.css () để nhắm mục tiêu các tùy chọn chọn.

Góc> = 1,4

Do cấu trúc lại các chỉ thị lựa chọn và tùy chọn, sử dụng ng-ifkhông còn là một tùy chọn khả thi, do đó bạn phải chuyển ng-show="false"sang làm cho nó hoạt động trở lại.

Có thể hữu ích cho ai đó:

Nếu bạn muốn sử dụng tùy chọn đơn giản thay vì tùy chọn ng, bạn có thể làm như dưới đây:

<select ng-model="sortorder" ng-init="sortorder='publish_date'">
  <option value="publish_date">Ascending</option>
  <option value="-publish_date">Descending</option>
</select>

Đặt mô hình nội tuyến. Sử dụng ng-init để thoát khỏi tùy chọn trống

Một cái gì đó tương tự cũng xảy ra với tôi và được gây ra bởi một bản nâng cấp lên góc 1,5. ng-initdường như đang được phân tích cú pháp cho loại trong các phiên bản mới hơn của Angular. Trong Angular cũ hơn ng-init="myModelName=600"sẽ ánh xạ tới một tùy chọn có giá trị "600", <option value="600">First</option>nhưng trong Angular 1.5, nó sẽ không tìm thấy điều này vì dường như nó đang mong đợi tìm thấy một tùy chọn có giá trị 600 tức là <option value=600>First</option>. Angular sau đó sẽ chèn một mục đầu tiên ngẫu nhiên:

<option value="? number:600 ?"></option>

Góc <1.2.x

<select ng-model="myModelName" ng-init="myModelName=600">
  <option value="600">First</option>
  <option value="700">Second</option>
</select>

Góc> 1,2

<select ng-model="myModelName" ng-init="myModelName='600'">
  <option value="600">First</option>
  <option value="700">Second</option>
</select>

Trong vô số câu trả lời ở đây, tôi cho rằng tôi đã đăng lại giải pháp hiệu quả cho mình và đáp ứng tất cả các điều kiện sau:

• cung cấp một placeholder / nhắc khi ng-mô hình là falsy (ví dụ: "--Chọn region--" w.value="" )
• khi ng-mô hình giá trị là falsy và người dùng mở các tùy chọn thả xuống, giữ chỗ được chọn (các giải pháp khác được đề cập ở đây làm cho các tùy chọn đầu tiên xuất hiện lựa chọn mà có thể gây hiểu lầm)
• cho phép người dùng để bỏ chọn một giá trị hợp lệ, chủ yếu chọn falsy giá trị / default lại

mã

<select name="market_vertical" ng-model="vc.viewData.market_vertical"
    ng-options="opt as (opt | capitalizeFirst) for opt in vc.adminData.regions">

    <option ng-selected="true" value="">select a market vertical</option>
</select>

src

q & a gốc - https://stackoverflow.com/a/32880941/1121919

Một giải pháp nhanh chóng:

select option:empty { display:none }

Hy vọng nó sẽ giúp được ai đó. Lý tưởng nhất, câu trả lời được chọn phải là cách tiếp cận nhưng nếu trong trường hợp không thể thì nên làm việc như một bản vá.

Có ng-model sẽ tạo giá trị tùy chọn trống, khi thuộc tính mô hình ng không xác định. Chúng ta có thể tránh điều này, nếu chúng ta gán đối tượng cho ng-model

Thí dụ

mã hóa góc

$scope.collections = [
    { name: 'Feature', value: 'feature' }, 
    { name: 'Bug', value: 'bug' }, 
    { name: 'Enhancement', value: 'enhancement'}
];

$scope.selectedOption = $scope.collections[0];


<select class='form-control' data-ng-model='selectedOption' data-ng-options='item as item.name for item in collections'></select>

Lưu ý quan trọng:

Gán đối tượng của mảng như $ scope.collections [0] hoặc $ scope.collections [1] cho ng-model, không sử dụng các thuộc tính đối tượng. nếu bạn đang chọn giá trị tùy chọn từ máy chủ, sử dụng chức năng gọi lại, gán đối tượng cho mô hình ng

LƯU Ý từ tài liệu góc

Lưu ý: ngModel so sánh theo tham chiếu, không phải giá trị. Điều này rất quan trọng khi liên kết với một mảng các đối tượng. xem một ví dụ http://jsfiddle.net/qWzTb/

tôi đã cố gắng rất nhiều lần cuối cùng tôi đã tìm thấy nó.

Mặc dù câu trả lời của cả @ pkozlowski.opensource và @ Mark đều đúng, tôi muốn chia sẻ phiên bản sửa đổi một chút của mình, nơi tôi luôn chọn mục đầu tiên trong danh sách, bất kể giá trị của nó là gì:

<select ng-options="option.value as option.name for option in typeOptions" ng-init="form.type=typeOptions[0].value">
</select>

Tôi đang sử dụng Angular 1.4x và tôi đã tìm thấy ví dụ này, vì vậy tôi đã sử dụng ng-init để đặt giá trị ban đầu trong phần chọn:

<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.id for item in items"></select>

Tôi phải đối mặt với cùng một vấn đề. Nếu bạn đang đăng một hình thức góc với bài đăng bình thường thì bạn sẽ phải đối mặt với vấn đề này, vì góc không cho phép bạn đặt giá trị cho các tùy chọn theo cách bạn đã sử dụng. Nếu bạn nhận được giá trị của "form.type" thì bạn sẽ tìm thấy giá trị phù hợp. Bạn phải đăng đối tượng góc cạnh nó không phải là bài mẫu.

Một giải pháp đơn giản là đặt một tùy chọn có giá trị trống ""tôi thấy điều này giúp loại bỏ tùy chọn không xác định thêm.

Ok, thực sự câu trả lời rất đơn giản: khi có một tùy chọn không được Angular nhận ra, nó bao gồm một tùy chọn buồn tẻ. Những gì bạn đang làm sai là, khi bạn sử dụng tùy chọn ng, nó sẽ đọc một đối tượng, nói[{ id: 10, name: test }, { id: 11, name: test2 }] right?

Đây là giá trị mô hình của bạn cần để đánh giá nó bằng nhau, giả sử bạn muốn giá trị được chọn là 10, bạn cần đặt mô hình của mình thành một giá trị như { id: 10, name: test } chọn 10, do đó nó sẽ KHÔNG tạo ra thùng rác đó.

Hy vọng nó sẽ giúp mọi người hiểu, tôi đã có một khoảng thời gian cố gắng :)

Giải pháp này hiệu quả với tôi:

<select ng-model="mymodel">    
   <option ng-value="''" style="display:none;" selected>Country</option>
   <option value="US">USA</option>
</select>

Điều này làm việc cho tôi

<select ng-init="basicProfile.casteId" ng-model="basicProfile.casteId" class="form-control">
     <option value="0">Select Caste....</option>
     <option data-ng-repeat="option in formCastes" value="{{option.id}}">{{option.casteName}}</option>
 </select>

Điều này hoạt động hoàn toàn tốt

<select ng-model="contact.Title" ng-options="co for co in['Mr.','Ms.','Mrs.','Dr.','Prof.']">
    <option style="display:none" value=""></option>
</select>

Cách thức hoạt động là, điều này cho phép tùy chọn đầu tiên được hiển thị trước khi chọn một cái gì đó và display:noneloại bỏ nó tạo thành danh sách thả xuống để nếu bạn muốn bạn có thể làm

<select ng-model="contact.Title" ng-options="co for co in['Mr.','Ms.','Mrs.','Dr.','Prof.']">
    <option style="display:none" value="">select an option...</option>
</select>

và điều này sẽ cung cấp cho bạn select and optiontrước khi chọn nhưng một khi được chọn, nó sẽ biến mất và nó sẽ không hiển thị trong danh sách thả xuống.

Hãy thử cái này trong bộ điều khiển của bạn, theo cùng một thứ tự:

$scope.typeOptions = [
    { name: 'Feature', value: 'feature' }, 
    { name: 'Bug', value: 'bug' }, 
    { name: 'Enhancement', value: 'enhancement' }
];
$scope.form.type = $scope.typeOptions[0];

Đây là cách khắc phục:

cho một dữ liệu mẫu như:

financeRef.pageCount = [{listCount:10,listName:modelStrings.COMMON_TEN_PAGE},    
{listCount:25,listName:modelStrings.COMMON_TWENTYFIVE_PAGE},
{listCount:50,listName:modelStrings.COMMON_FIFTY_PAGE}];

Tùy chọn chọn phải như thế này: -

<select ng-model="financeRef.financeLimit" ng-change="financeRef.updateRecords(1)" 
class="perPageCount" ng-show="financeRef.showTable" ng-init="financeRef.financeLimit=10"
ng-options="value.listCount as value.listName for  value in financeRef.pageCount"
></select>

Điểm quan trọng khi chúng ta viết value.listCountlà value.listName, nó sẽ tự động điền văn bản vào value.listNamenhưng giá trị của tùy chọn đã chọn làvalue.listCount mặc dù các giá trị mà tôi hiển thị bình thường 0,1,2 .. và cứ thế !!!

Trong trường hợp của tôi, cái financeRef.financeLimitthực sự đang nắm lấy value.listCountvà tôi có thể thực hiện thao tác của mình trong bộ điều khiển một cách linh hoạt.

Tôi muốn thêm rằng nếu giá trị ban đầu đến từ một ràng buộc từ một số phần tử cha hoặc thành phần 1.5, hãy đảm bảo rằng loại thích hợp được thông qua. Nếu sử dụng@ trong liên kết, biến được truyền sẽ là chuỗi và nếu các tùy chọn là ví dụ. số nguyên sau đó tùy chọn trống sẽ hiển thị.

Hoặc phân tích chính xác giá trị trong init, hoặc ràng buộc với <và không @(ít được đề xuất cho hiệu suất trừ khi cần thiết).

Giải pháp đơn giản

<select ng-model='form.type' required><options>
<option ng-repeat="tp in typeOptions" ng-selected="    
{{form.type==tp.value?true:false}}" value="{{tp.value}}">{{tp.name}}</option>

Một giải pháp nghiền với jQuery khi bạn không kiểm soát các tùy chọn

html:

<select id="selector" ng-select="selector" data-ng-init=init() >
...
</select>

js:

$scope.init = function () {
    jQuery('#selector option:first').remove();
    $scope.selector=jQuery('#selector option:first').val();
}

Nếu bạn sử dụng ng-init mô hình của bạn để giải quyết vấn đề này:

<select ng-model="foo" ng-app ng-init="foo='2'">

tôi đã có cùng một vấn đề, tôi (loại bỏ "ng-model") đã thay đổi điều này:

<select ng-model="mapayear" id="mapayear" name="mapayear" style="  display:inline-block !important;  max-width: 20%;" class="form-control">
  <option id="removable" hidden> Selecione u </option>
    <option selected ng-repeat="x in anos" value="{{ x.ano }}">{{ x.ano }}
</option>
</select>

đến đây:

<select id="mapayear" name="mapayear" style="  display:inline-block !important;  max-width: 20%;" class="form-control">
  <option id="removable" hidden> Selecione u </option>
    <option selected ng-repeat="x in anos" value="{{ x.ano }}">{{ x.ano }}
</option>
</select>

Bây giờ nó đang hoạt động, nhưng trong trường hợp của tôi, đó là lý do tôi đã xóa phạm vi đó khỏi ng.contler, kiểm tra xem bạn có làm như vậy không.

Xin chào Tôi đã có một số tài liệu tham khảo di động jQUery và tôi đã gỡ bỏ chúng. Với jQuery mobile, mọi sửa lỗi trên đều không phù hợp với tôi. (Thật tuyệt nếu ai đó có thể giải thích xung đột giữa jQuery Mobile và Angular JS)

https://guntucomputerhacks.blogspot.com.au/2017/10/angular-js-drop-down-first-options-vs.html

Điều duy nhất làm việc cho tôi được sử dụng track bytrong ng-options, như thế này:

 <select class="dropdown" ng-model="selectedUserTable" ng-options="option.Id as option.Name for option in userTables track by option.Id">

Tham khảo ví dụ từ tài liệu angularjs làm thế nào để khắc phục những vấn đề này.

1. Tới liên kết tài liệu này ở đây
2. Tìm ' Liên kết chọn với giá trị không phải chuỗi thông qua phân tích / định dạng ngModel '
3. Ở đó bạn có thể thấy ở đó, chỉ thị được gọi là ' convertToNumber ' giải quyết vấn đề.

Nó làm việc cho tôi. Cũng có thể xem cách nó hoạt động ở đây

Chúng ta có thể sử dụng CSS để ẩn tùy chọn đầu tiên, nhưng nó không hoạt động trong IE 10, 11. Cách tốt nhất là xóa phần tử bằng Jquery. Giải pháp này hoạt động cho trình duyệt chính được thử nghiệm trong chrome và IE10, 11

Ngoài ra nếu bạn đang sử dụng góc, đôi khi sử dụng setTimeout hoạt động

$scope.RemoveFirstOptionElement = function (element) {
    setTimeout(function () {
        $(element.children()[0]).remove();
    }, 0);
};