เหตุใด AngularJS จึงรวมตัวเลือกว่างไว้ในรายการ?

ฉันทำงานกับ AngularJS ในช่วงสองสามสัปดาห์ที่ผ่านมาและสิ่งหนึ่งที่รบกวนฉันจริงๆก็คือแม้หลังจากพยายามเปลี่ยนลำดับทั้งหมดหรือการกำหนดค่าที่กำหนดไว้ในสเปคที่http://docs.angularjs.org/api/ng .directive: selectฉันยังคงได้รับตัวเลือกว่างเป็นลูกคนแรกขององค์ประกอบที่เลือก

นี่คือหยก:

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

ที่นี่ตัวควบคุม:

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

สุดท้ายนี่คือ HTML ที่สร้างขึ้น:

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

ฉันต้องทำอย่างไรเพื่อกำจัดมัน?

PS: สิ่งต่าง ๆ ทำงานโดยปราศจากสิ่งนี้เช่นกัน แต่มันก็ดูแปลกถ้าคุณใช้ select2 โดยไม่ต้องเลือกหลายตัว

ที่ว่างเปล่าoptionถูกสร้างขึ้นเมื่อค่าอ้างอิงโดยไม่ได้อยู่ในชุดของตัวเลือกส่งผ่านไปยังng-model ng-optionsสิ่งนี้เกิดขึ้นเพื่อป้องกันการเลือกรูปแบบโดยไม่ตั้งใจ: AngularJS สามารถเห็นได้ว่ารูปแบบเริ่มต้นนั้นไม่ได้กำหนดหรือไม่อยู่ในชุดตัวเลือกและไม่ต้องการตัดสินใจค่ารุ่นด้วยตัวเอง

หากคุณต้องการกำจัดตัวเลือกที่ว่างเปล่าให้เลือกค่าเริ่มต้นในคอนโทรลเลอร์ของคุณดังนี้:

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

นี่คือ jsFiddle: http://jsfiddle.net/MTfRD/3/

กล่าวโดยย่อ: ตัวเลือกที่ว่างเปล่าหมายความว่าไม่มีการเลือกรูปแบบที่ถูกต้อง (โดยที่ถูกต้องฉันหมายถึง: จากชุดตัวเลือก) คุณต้องเลือกค่ารุ่นที่ถูกต้องเพื่อกำจัดตัวเลือกที่ว่างเปล่านี้

หากคุณต้องการค่าเริ่มต้นให้ดูที่คำตอบของ @ pkozlowski.opensource ซึ่ง FYI สามารถนำไปใช้ในมุมมอง (แทนที่จะเป็นในคอนโทรลเลอร์) โดยใช้ 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>

หากคุณไม่ต้องการค่าเริ่มต้น "องค์ประกอบฮาร์ดโค้ดเดียวที่มีการตั้งค่าเป็นสตริงว่างสามารถซ้อนอยู่ในองค์ประกอบองค์ประกอบนี้จะเป็นตัวแทนของโมฆะหรือตัวเลือก" ไม่ได้เลือก ":

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

เชิงมุม <1.4

สำหรับใครก็ตามที่ถือว่า "null" เป็นค่าที่ถูกต้องสำหรับหนึ่งในตัวเลือก (ดังนั้นลองจินตนาการว่า "null" เป็นค่าของรายการใดรายการหนึ่งในtypeOptionsในตัวอย่างด้านล่าง) ฉันพบว่าวิธีที่ง่ายที่สุดเพื่อให้แน่ใจว่าเพิ่มโดยอัตโนมัติ ตัวเลือกที่ซ่อนอยู่คือการใช้ ng-if

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

ทำไมต้องng-ifและไม่ใช่ ng-hide? เนื่องจากคุณต้องการตัวเลือก css ที่จะกำหนดเป้าหมายตัวเลือกแรกภายในด้านบนเลือกเพื่อกำหนดเป้าหมายตัวเลือก "ของจริง" ไม่ใช่ตัวเลือกที่ซ่อนอยู่ มันจะมีประโยชน์เมื่อคุณใช้ไม้โปรแทรกเตอร์สำหรับการทดสอบ e2e และ (ด้วยเหตุผลใดก็ตาม) ที่คุณใช้ by.css () เพื่อกำหนดเป้าหมายตัวเลือกที่เลือก

เชิงมุม> = 1.4

เนื่องจากการปรับเปลี่ยนคำสั่งการเลือกและตัวเลือกใหม่การใช้ng-ifจึงไม่ใช่ตัวเลือกที่ใช้งานได้ดังนั้นคุณต้องหันมาใช้ng-show="false"เพื่อให้มันทำงานได้อีกครั้ง

อาจมีประโยชน์สำหรับใครบางคน:

หากคุณต้องการใช้ตัวเลือกธรรมดาแทน ng-options คุณสามารถทำได้ดังนี้:

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

ตั้งค่าแบบอินไลน์ ใช้ ng-init เพื่อกำจัดตัวเลือกที่ว่างเปล่า

มีบางอย่างที่คล้ายกันเกิดขึ้นกับฉันเช่นกันและเกิดจากการอัปเกรดเป็นเชิงมุม 1.5 ng-initดูเหมือนว่าจะถูกแยกวิเคราะห์สำหรับประเภทในรุ่นที่ใหม่กว่าของ Angular ในเก่าเชิงมุมng-init="myModelName=600"จะแมปไปยังตัวเลือกที่มีค่า "600" มี IE <option value="600">First</option>แต่ในเชิงมุม 1.5 มันจะไม่พบนี้ที่ดูเหมือนว่าจะได้รับการคาดหวังว่าจะหาตัวเลือกที่มีมูลค่า 600 <option value=600>First</option>คือ Angular จะแทรกรายการแรกแบบสุ่ม:

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

เชิงมุม <1.2.x

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

เชิงมุม> 1.2

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

ท่ามกลางประชาชนของคำตอบที่นี่ผมคิดฉัน repost วิธีการแก้ปัญหาที่ทำงานสำหรับฉันและได้พบกับทุกเงื่อนไขต่อไปนี้:

• ให้ยึด / พรอมต์เมื่อ NG-รุ่นfalsy (เช่น "เราควร region--" ว. วชิรvalue="")
• เมื่อค่า ng-model เป็นเท็จและผู้ใช้เปิดตัวเลือกแบบเลื่อนลงตัวยึดจะถูกเลือก (โซลูชันอื่น ๆ ที่กล่าวถึงที่นี่ทำให้ตัวเลือกแรกปรากฏขึ้นซึ่งเลือกซึ่งอาจทำให้เข้าใจผิด)
• อนุญาตให้ผู้ใช้ยกเลิกการเลือกค่าที่ถูกต้องเป็นหลักในการเลือกค่าเท็จ / ค่าเริ่มต้นอีกครั้ง

รหัส

<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 ดั้งเดิม - https://stackoverflow.com/a/32880941/1121919

ทางออกที่รวดเร็ว:

select option:empty { display:none }

หวังว่าจะช่วยใครซักคน อุดมคติแล้วคำตอบที่เลือกควรเป็นแนวทาง แต่หากในกรณีที่ไม่สามารถทำได้ควรทำงานเป็นปะแก้

ใช่ ng-model จะสร้างค่าตัวเลือกที่ว่างเปล่าเมื่อคุณสมบัติ ng-model ไม่ได้กำหนดไว้ เราสามารถหลีกเลี่ยงสิ่งนี้ได้ถ้าเรากำหนด object ให้กับ ng-model

ตัวอย่าง

การเข้ารหัสเชิงมุม

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

โน๊ตสำคัญ:

กำหนดวัตถุของอาร์เรย์เช่น $ scope.collections [0] หรือ $ scope.collections [1] ให้กับ ng-model อย่าใช้คุณสมบัติของวัตถุ หากคุณได้รับค่าตัวเลือกเลือกจากเซิร์ฟเวอร์โดยใช้ฟังก์ชั่นโทรกลับกำหนดวัตถุให้กับรุ่น NG

หมายเหตุจากเอกสารเชิงมุม

หมายเหตุ: ngModel เปรียบเทียบโดยการอ้างอิงไม่ใช่ค่า สิ่งนี้มีความสำคัญเมื่อเชื่อมโยงกับอาร์เรย์ของวัตถุ ดูตัวอย่างhttp://jsfiddle.net/qWzTb/

ฉันได้ลองหลายครั้งในที่สุดฉันก็พบว่ามัน

แม้ว่าคำตอบของ @ pkozlowski.opensource และ @ Mark นั้นถูกต้อง แต่ฉันต้องการแชร์เวอร์ชันที่แก้ไขเล็กน้อยของฉันโดยที่ฉันมักจะเลือกรายการแรกในรายการโดยไม่คำนึงถึงค่าของมัน:

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

ฉันใช้ Angular 1.4x และฉันพบตัวอย่างนี้ดังนั้นฉันใช้ ng-init เพื่อตั้งค่าเริ่มต้นใน select:

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

ฉันประสบปัญหาเดียวกัน หากคุณกำลังโพสต์ฟอร์มเชิงมุมที่มีการโพสต์ปกติแล้วคุณจะพบปัญหานี้เนื่องจากเชิงมุมไม่อนุญาตให้คุณตั้งค่าสำหรับตัวเลือกในแบบที่คุณใช้ หากคุณได้รับค่าของ "form.type" จากนั้นคุณจะพบค่าที่เหมาะสม คุณต้องโพสต์วัตถุเชิงมุมมันไม่ได้เป็นแบบฟอร์มการโพสต์

วิธีแก้ปัญหาอย่างง่ายคือการตั้งค่าตัวเลือกที่มีค่าว่างเปล่าที่""ฉันพบซึ่งจะเป็นการกำจัดตัวเลือกที่ไม่ได้กำหนดเพิ่มเติม

ตกลงจริง ๆ แล้วคำตอบนั้นง่ายมาก: เมื่อมีตัวเลือกที่ไม่เป็นที่รู้จักโดย Angular จะมีตัวเลือกที่น่าเบื่อ สิ่งที่คุณทำผิดคือเมื่อคุณใช้ ng-options มันจะอ่านวัตถุพูด[{ id: 10, name: test }, { id: 11, name: test2 }] right?

นี่คือค่าโมเดลของคุณที่ต้องประเมินมันเท่ากันคุณต้องการให้ค่าที่เลือกเป็น 10 คุณต้องตั้งค่าโมเดลของคุณเป็นค่าเช่น{ id: 10, name: test }เลือก 10 ดังนั้นมันจะไม่สร้างถังขยะนั้น

หวังว่าจะช่วยให้ทุกคนเข้าใจฉันมีเวลาลอง :)

วิธีนี้ใช้ได้ผลสำหรับฉัน:

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

สิ่งนี้ใช้ได้สำหรับฉัน

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

มันใช้งานได้ดีอย่างสมบูรณ์แบบ

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

วิธีการทำงานคือให้ตัวเลือกแรกที่จะแสดงก่อนที่จะเลือกบางสิ่งและการdisplay:noneลบมันจะเป็นแบบเลื่อนลงดังนั้นหากคุณต้องการคุณสามารถทำได้

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

และสิ่งนี้จะให้คุณselect and optionก่อนเลือก แต่เมื่อเลือกแล้วมันจะหายไปและจะไม่แสดงในรายการแบบหล่นลง

ลองอันนี้ในคอนโทรลเลอร์ของคุณตามลำดับเดียวกัน:

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

นี่คือการแก้ไข:

สำหรับข้อมูลตัวอย่างเช่น:

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

ตัวเลือกที่เลือกควรเป็นดังนี้: -

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

จุดที่ถูกเมื่อเราเขียนvalue.listCountเป็นvalue.listNameมันโดยอัตโนมัติข้อความในvalue.listNameแต่ค่าของตัวเลือกที่เลือกคือvalue.listCountแม้ว่าค่าของฉันแสดงปกติ 0,1,2 .. และอื่น ๆ !!!

ในกรณีของฉันfinanceRef.financeLimitคือการคว้าvalue.listCountและฉันสามารถทำการจัดการของฉันในตัวควบคุมแบบไดนามิก

ฉันต้องการเพิ่มว่าถ้าค่าเริ่มต้นมาจากการผูกจากองค์ประกอบหลักหรือองค์ประกอบ 1.5 ตรวจสอบให้แน่ใจว่าประเภทที่เหมาะสมจะถูกส่งผ่าน หากใช้@ในการเชื่อมโยงตัวแปรที่ส่งผ่านจะเป็นสตริงและหากมีตัวเลือกเช่น จำนวนเต็มจากนั้นตัวเลือกที่ว่างจะปรากฏขึ้น

แยกวิเคราะห์ค่าใน init อย่างถูกต้องหรือเชื่อมโยงด้วย<และไม่@แนะนำให้ใช้กับประสิทธิภาพน้อยกว่าเว้นแต่จำเป็น

ทางออกที่ง่าย

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

โซลูชันการบดด้วย jQuery เมื่อคุณไม่ได้ควบคุมตัวเลือก

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

หากคุณใช้ ng-init โมเดลของคุณเพื่อแก้ปัญหานี้:

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

ฉันมีปัญหาเดียวกันฉัน (ลบ "ng-model") เปลี่ยนสิ่งนี้:

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

สำหรับสิ่งนี้:

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

ตอนนี้มันใช้งานได้ แต่ในกรณีของฉันมันทำให้ ive ลบขอบเขตนั้นจาก ng.controller ตรวจสอบว่าคุณไม่ได้ทำแบบเดียวกัน

สวัสดีฉันมี jQuery ที่อ้างอิงจากมือถือและฉันลบมันออก ด้วย jQuery mobile การแก้ไขใด ๆ ข้างต้นไม่ได้ผลสำหรับฉัน (มันยอดเยี่ยมถ้ามีใครสามารถอธิบายความขัดแย้งระหว่าง jQuery Mobile และ Angular JS)

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

สิ่งเดียวที่ใช้ได้ผลสำหรับฉันคือใช้track byในng-optionsเช่นนี้:

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

อ้างถึงตัวอย่างจากเอกสารประกอบเชิงมุมวิธีการเอาชนะปัญหาเหล่านี้

1. ไปที่ลิงค์เอกสารนี้ที่นี่
2. ค้นหา ' การเชื่อมโยงเลือกเป็นค่าที่ไม่ใช่สตริงผ่านการแยกวิเคราะห์ / จัดรูปแบบ ngModel '
3. มีคุณสามารถดูมีคำสั่งที่เรียกว่า ' convertToNumber ' แก้ปัญหา

มันใช้งานได้สำหรับฉัน สามารถดูวิธีการใช้งานได้ที่นี่

เราสามารถใช้ CSS เพื่อซ่อนตัวเลือกแรก แต่มันจะไม่ทำงานใน IE 10, 11 วิธีที่ดีที่สุดคือการลบองค์ประกอบโดยใช้ Jquery วิธีนี้ใช้ได้กับเบราว์เซอร์หลักที่ทดสอบด้วย chrome และ IE10, 11

นอกจากนี้หากคุณกำลังใช้งานเชิงมุมบางครั้งการใช้งาน setTimeout

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