วิธีการมีตัวเลือกเริ่มต้นในกล่องเลือก Angular.js

ฉันค้นหา Google และไม่พบสิ่งใดในสิ่งนี้

ฉันมีรหัสนี้

<select ng-model="somethingHere" 
        ng-options="option.value as option.name for option in options"
></select>

ด้วยข้อมูลบางอย่างเช่นนี้

options = [{
   name: 'Something Cool',
   value: 'something-cool-value'
}, {
   name: 'Something Else',
   value: 'something-else-value'
}];

และผลผลิตก็เป็นแบบนี้

<select ng-model="somethingHere"  
        ng-options="option.value as option.name for option in options" 
        class="ng-pristine ng-valid">

    <option value="?" selected="selected"></option>
    <option value="0">Something Cool</option>
    <option value="1">Something Else</option>
</select>

เป็นไปได้อย่างไรที่จะตั้งค่าตัวเลือกแรกในข้อมูลเป็นค่าเริ่มต้นดังนั้นคุณจะได้รับผลลัพธ์เช่นนี้

<select ng-model="somethingHere" ....>
    <option value="0" selected="selected">Something Cool</option>
    <option value="1">Something Else</option>
</select>

คุณสามารถใช้ng-initแบบนี้ได้

<select ng-init="somethingHere = options[0]" 
        ng-model="somethingHere" 
        ng-options="option.name for option in options">
</select>

หากคุณต้องการให้แน่ใจว่า$scope.somethingHereค่าของคุณจะไม่ถูกเขียนทับเมื่อมุมมองของคุณเริ่มต้นคุณจะต้องรวมตัวกัน ( somethingHere = somethingHere || options[0].value) ค่าใน ng-init ของคุณดังนี้:

<select ng-model="somethingHere" 
        ng-init="somethingHere = somethingHere || options[0].value"
        ng-options="option.value as option.name for option in options">
</select>

ลองสิ่งนี้:

HTML

<select 
    ng-model="selectedOption" 
    ng-options="option.name for option in options">
</select>

จาวาสคริ

function Ctrl($scope) {
    $scope.options = [
        {
          name: 'Something Cool',
          value: 'something-cool-value'
        }, 
        {
          name: 'Something Else',
          value: 'something-else-value'
        }
    ];

    $scope.selectedOption = $scope.options[0];
}

Plunker ที่นี่

หากคุณต้องการตั้งค่าที่จะผูกพันกับแบบจำลองจริงๆให้เปลี่ยนค่า ng-optionsแอตทริบิวต์เป็น

ng-options="option.value as option.name for option in options"

และจาวาสคริปต์เพื่อ

...
$scope.selectedOption = $scope.options[0].value;

นักเก็นอีกคนที่นี่พิจารณาข้างต้น

เพียงคำตอบเดียวของ Srivathsa Harish Venkataramana ที่กล่าวถึงtrack byซึ่งเป็นวิธีแก้ปัญหาสำหรับเรื่องนี้!

นี่คือตัวอย่างพร้อมกับ Plunker (ลิงค์ด้านล่าง) ของวิธีใช้track byในselect ng-options :

<select ng-model="selectedCity"
        ng-options="city as city.name for city in cities track by city.id">
  <option value="">-- Select City --</option>
</select>

หากselectedCityกำหนดไว้ในขอบเขตเชิงมุมและมีidคุณสมบัติที่มีค่าเดียวกับรายการidใด ๆcityในcitiesรายการมันจะถูกเลือกโดยอัตโนมัติเมื่อโหลด

นี่คือ Plunker สำหรับสิ่งนี้: http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview

ดูเอกสารแหล่งที่มาสำหรับรายละเอียดเพิ่มเติม: https://code.angularjs.org/1.3.15/docs/api/ng/directive/select

ฉันคิดว่าหลังจากรวม 'track by' คุณสามารถใช้มันใน ng-options เพื่อรับสิ่งที่คุณต้องการเช่น

 <select ng-model="somethingHere" ng-options="option.name for option in options track by option.value" ></select>

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

 <select ng-model="somethingHere" ng-options="object.name for option in options track by object.id" ></select>

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

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

การใช้ ngInit ที่เหมาะสมเพียงอย่างเดียวคือการใช้นามแฝงคุณสมบัติพิเศษของ ngRepeat ดังที่เห็นในตัวอย่างด้านล่าง นอกเหนือจากกรณีนี้คุณควรใช้ตัวควบคุมแทน ngInit เพื่อเริ่มต้นค่าในขอบเขต

คุณยังสามารถใช้ng-repeat แทนng-optionsตัวเลือกของคุณ ด้วยng-repeatคุณสามารถใช้ng-selectedกับng-repeatคุณสมบัติพิเศษ เช่นดัชนี $, $ คี่, $ แม้จะทำงานนี้ได้โดยไม่ต้องมีการเข้ารหัสใด ๆ

$first เป็นหนึ่งในคุณสมบัติพิเศษ ng-repeat

  <select ng-model="foo">
    <option ng-selected="$first" ng-repeat="(id,value) in myOptions" value="{{id}}">
      {{value}}
    </option>
  </select>

---------------------- แก้ไข ----------------
แม้ว่าจะใช้ได้ แต่ฉันต้องการ @ mik-t ตอบเมื่อคุณรู้ว่าสิ่งที่มีค่าเพื่อเลือกhttps://stackoverflow.com/a/29564802/454252ซึ่งการใช้track-byและng-optionsไม่ใช้หรือng-initng-repeat

คำตอบนี้ควรใช้เมื่อคุณต้องเลือกรายการแรกโดยไม่ทราบว่าควรเลือกมูลค่าใด เช่นฉันใช้สิ่งนี้เพื่อการทำให้สมบูรณ์อัตโนมัติซึ่งต้องเลือกรายการแรกตลอดเวลา

วิธีแก้ปัญหาของฉันคือใช้ html เพื่อเข้ารหัสตัวเลือกเริ่มต้นของฉัน ชอบมาก

ใน HAML:

%select{'ng-model' => 'province', 'ng-options' => "province as province for province in summary.provinces", 'chosen' => "chosen-select", 'data-placeholder' => "BC & ON"}
  %option{:value => "", :selected => "selected"}
    BC & ON

ใน HTML:

<select ng-model="province" ng-options="province as province for province in summary.provinces" chosen="chosen-select" data-placeholder="BC & ON">
  <option value="" selected="selected">BC &amp; ON</option>
</select>

ฉันต้องการตัวเลือกเริ่มต้นของฉันเพื่อส่งคืนค่าทั้งหมดจาก API ของฉันนั่นเป็นเหตุผลที่ฉันมีค่าว่าง ยังแก้ตัว haml ของฉัน ฉันรู้ว่านี่ไม่ใช่คำตอบสำหรับคำถามของ OP โดยตรง แต่ผู้คนพบสิ่งนี้บน Google หวังว่านี่จะช่วยคนอื่นได้

ใช้รหัสด้านล่างเพื่อเติมตัวเลือกที่เลือกจากแบบจำลองของคุณ

<select id="roomForListing" ng-model="selectedRoom.roomName" >

<option ng-repeat="room in roomList" title="{{room.roomName}}" ng-selected="{{room.roomName == selectedRoom.roomName}}" value="{{room.roomName}}">{{room.roomName}}</option>

</select>

คุณสามารถใส่ค่าของคุณลงในอาร์เรย์และเติมข้อมูลตัวเลือกของคุณโดยอัตโนมัติขึ้นอยู่กับจำนวนตัวเลือกที่คุณมี

<select ng-model="somethingHere.values" ng-options="values for values in [5,4,3,2,1]">
   <option value="">Pick a Number</option>
</select>

ในกรณีของฉันฉันต้องใส่ค่าเริ่มต้นเท่านั้นเพื่อบอกให้ผู้ใช้เลือกตัวเลือกดังนั้นฉันชอบรหัสด้านล่าง:

<select ...
    <option value="" ng-selected="selected">Select one option</option>
</select>

เมื่อฉันลองตัวเลือกที่มีค่า! = ของสตริงว่าง (null) ตัวเลือกถูกแทนที่ด้วยเชิงมุม แต่เมื่อใส่ตัวเลือกเช่นนั้น (ด้วยค่า null) apear ที่เลือกด้วยตัวเลือกนี้

ขอโทษด้วยภาษาอังกฤษที่ไม่ดีของฉันและฉันหวังว่าฉันจะช่วยในเรื่องนี้

การใช้selectกับngOptionsและการตั้งค่าเริ่มต้น:

ดูเอกสารประกอบการngOptionsสำหรับngOptionsตัวอย่างการใช้งานเพิ่มเติม

angular.module('defaultValueSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.data = {
    availableOptions: [
      {id: '1', name: 'Option A'},
      {id: '2', name: 'Option B'},
      {id: '3', name: 'Option C'}
    ],
    selectedOption: {id: '2', name: 'Option B'} //This sets the default value of the select in the ui
    };
}]);

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<body ng-app="defaultValueSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="mySelect">Make a choice:</label>
    <select name="mySelect" id="mySelect"
      ng-options="option.name for option in data.availableOptions track by option.id"
      ng-model="data.selectedOption"></select>
  </form>
  <hr>
  <tt>option = {{data.selectedOption}}</tt><br/>
</div>

plnkr.co

เอกสารอย่างเป็นทางการเกี่ยวกับSELECTองค์ประกอบHTML ที่มีผลผูกพันข้อมูลเชิงมุม

การเชื่อมโยงselectกับค่าที่ไม่ใช่สตริงผ่านการngModelวิเคราะห์ / การจัดรูปแบบ:

(function(angular) {
  'use strict';
angular.module('nonStringSelect', [])
  .run(function($rootScope) {
    $rootScope.model = { id: 2 };
  })
  .directive('convertToNumber', function() {
    return {
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        ngModel.$parsers.push(function(val) {
          return parseInt(val, 10);
        });
        ngModel.$formatters.push(function(val) {
          return '' + val;
        });
      }
    };
  });
})(window.angular);

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
<body ng-app="nonStringSelect">
  <select ng-model="model.id" convert-to-number>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
{{ model }}
</body>

plnkr.co

ตัวอย่างอื่น ๆ :

angular.module('defaultValueSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.availableOptions = [
     { name: 'Apple', value: 'apple' }, 
     { name: 'Banana', value: 'banana' }, 
     { name: 'Kiwi', value: 'kiwi' }
   ];
   $scope.data = {selectedOption : $scope.availableOptions[1].value};
}]);

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<body ng-app="defaultValueSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <select ng-model="data.selectedOption" required ng-options="option.value as option.name for option in availableOptions"></select>
  </form>  
  </div>
</body>

jsfiddle

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

<select ng-model="somethingHere" ng-init="somethingHere='Cool'">
    <option value="Cool">Something Cool</option>
    <option value="Else">Something Else</option>
</select>

ในกรณีของฉันตั้งแต่เริ่มต้นแตกต่างกันไปจากกรณีและกรณีในรูปแบบ ฉันเพิ่มแอตทริบิวต์ที่กำหนดเองในแท็กเลือก

 <select setSeletected="{{data.value}}">
      <option value="value1"> value1....
      <option value="value2"> value2....
       ......

ในคำสั่งฉันสร้างสคริปต์ที่ตรวจสอบค่าและเมื่อเติมเชิงมุมในชุดตัวเลือกที่มีค่าที่จะเลือก

 .directive('setSelected', function(){
    restrict: 'A',
    link: (scope, element, attrs){
     function setSel=(){
     //test if the value is defined if not try again if so run the command
       if (typeof attrs.setSelected=='undefined'){             
         window.setTimeout( function(){setSel()},300) 
       }else{
         element.find('[value="'+attrs.setSelected+'"]').prop('selected',true);          
       }
     }
    }

  setSel()

})

เพิ่งแปลสิ่งนี้จาก coffescript on the fly อย่างน้อย jist ของมันถูกต้องหากไม่ใช่สิ่งที่รู

มันไม่ใช่วิธีที่ง่ายที่สุด แต่ทำได้เมื่อค่าแตกต่างกัน

ในการตอบสนองต่อคำตอบของเบ็นเลชควรมีบรรทัดนี้

ng-init="somethingHere = somethingHere || options[0]" 

แทน

ng-init="somethingHere = somethingHere || options[0].value" 

นั่นคือ,

<select ng-model="somethingHere"
        ng-init="somethingHere = somethingHere || options[0]"
        ng-options="option.name for option in options track by option.value">
</select>

เพียงใช้ng-selected="true"ดังนี้:

<select ng-model="myModel">
        <option value="a" ng-selected="true">A</option>
        <option value="b">B</option>
</select>

ฉันจะตั้งค่าโมเดลในคอนโทรลเลอร์ จากนั้นตัวเลือกจะใช้ค่าเริ่มต้นเป็นค่านั้น เช่น html:

<select ng-options="..." ng-model="selectedItem">

ตัวควบคุมเชิงมุม (ใช้ทรัพยากร):

myResource.items(function(items){
  $scope.items=items;
  if(items.length>0){
     $scope.selectedItem= items[0];
//if you want the first. Could be from config whatever
  }
});

สิ่งนี้ใช้ได้กับฉัน

ng-selected="true" 

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

<select ng-options="list.key as list.name for list in lists track by list.id" ng-model="selectedItem">

ดังนั้นตัวเลือกที่มีค่าเท่ากัน list.keyและselectedItemเป็นค่าเริ่มต้นที่เลือกไว้

ฉันต้องการค่าเริ่มต้น“ กรุณาเลือก” เพื่อยกเลิกการเลือก ฉันยังต้องสามารถตั้งค่าตัวเลือกเริ่มต้นตามเงื่อนไข

ฉันได้วิธีนี้ง่าย ๆ ต่อไปนี้: รหัส JS: // พลิกเหล่านี้ 2 เพื่อทดสอบค่าเริ่มต้นที่เลือกหรือไม่มีค่าเริ่มต้นด้วยข้อความ“ โปรดเลือก” ค่าเริ่มต้น //$scope.defaultOption = 0; $ scope.defaultOption = {key: '3', ค่า: 'ตัวเลือก 3'};

$scope.options = [
   { key: '1', value: 'Option 1' },
   { key: '2', value: 'Option 2' },
   { key: '3', value: 'Option 3' },
   { key: '4', value: 'Option 4' }
];

getOptions();

function getOptions(){
    if ($scope.defaultOption != 0)
    { $scope.options.selectedOption = $scope.defaultOption; }
}

HTML:

<select name="OptionSelect" id="OptionSelect" ng-model="options.selectedOption" ng-options="item.value for item in options track by item.key">
<option value="" disabled selected style="display: none;"> -- Please Select -- </option>
</select>
<h1>You selected: {{options.selectedOption.key}}</h1>         

ฉันหวังว่านี่จะช่วยคนอื่นที่มีข้อกำหนดคล้ายกัน

"การโปรดเลือก" ก็ประสบความสำเร็จผ่านคำตอบ Joffrey Outtier ของที่นี่

หากคุณมีบางอย่างแทนที่จะเป็นเพียงแค่เริ่มต้นส่วนของวันที่คุณสามารถใช้งานได้ng-init()โดยประกาศในตัวควบคุมของคุณและใช้มันที่ด้านบนของ HTML ของคุณ ฟังก์ชั่นนี้จะทำงานเหมือนตัวสร้างสำหรับคอนโทรลเลอร์ของคุณและคุณสามารถเริ่มต้นตัวแปรของคุณได้

angular.module('myApp', [])
 .controller('myController', ['$scope', ($scope) => {
   $scope.allOptions = [
     { name: 'Apple', value: 'apple' }, 
     { name: 'Banana', value: 'banana' }
   ];
   $scope.myInit = () => {
      $scope.userSelected = 'apple'
      // Other initiations can goes here..
   }
}]);


<body ng-app="myApp">
  <div ng-controller="myController" ng-init="init()">
    <select ng-model="userSelected" ng-options="option.value as option.name for option in allOptions"></select>
   </div>
</body>

    <!--
    Using following solution you can set initial 
default value at controller as well as after change option selected value shown as default.
    -->
    <script type="text/javascript">
      function myCtrl($scope)
        {
          //...
            $scope.myModel=Initial Default Value; //set default value as required
          //..
        }
    </script>
    <select ng-model="myModel" 
                ng-init="myModel= myModel"
                ng-options="option.value as option.name for option in options">
        </select>

ลองใช้ตัวควบคุมเชิงมุมของคุณ ...

$ somethingHere = {name: 'Something Cool'};

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

และหากไม่ได้ผลให้ลองใช้วิธีนี้: ng-options = "option.value เป็น option.name สำหรับตัวเลือกในตัวเลือกที่ติดตามโดย option.name"

ฉันคิดว่าวิธีที่ง่ายที่สุดคือ

 ng-selected="$first"