Làm thế nào để có một tùy chọn mặc định trong hộp chọn Angular.js

Tôi đã tìm kiếm Google và không thể tìm thấy bất cứ điều gì về điều này.

Tôi có mã này.

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

Với một số dữ liệu như thế này

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

Và đầu ra là một cái gì đó như thế này.

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

Làm thế nào có thể đặt tùy chọn đầu tiên trong dữ liệu làm giá trị mặc định để bạn sẽ nhận được kết quả như thế này.

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

Bạn chỉ có thể sử dụng ng-init như thế này

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

Nếu bạn muốn đảm bảo $scope.somethingHeregiá trị của mình không bị ghi đè khi chế độ xem của bạn khởi chạy, bạn sẽ muốn kết hợp lại ( somethingHere = somethingHere || options[0].value) giá trị trong ng-init của bạn như vậy:

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

Thử cái này:

HTML

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

Javascript

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 ở đây .

Nếu bạn thực sự muốn đặt giá trị sẽ được liên kết với mô hình, sau đó thay đổi ng-optionsthuộc tính thành

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

và Javascript để

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

Một Plunker khác ở đây xem xét ở trên.

Chỉ có một câu trả lời của Srivathsa Harish Venkataramana được đề cậptrack by đó thực sự là một giải pháp cho việc này!

Dưới đây là một ví dụ cùng với Plunker (liên kết bên dưới) về cách sử dụng track bytrong 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>

Nếu selectedCityđược định nghĩa trên phạm vi góc, và nó có idtài sản với giá trị tương tự như bất kỳ idcủa bất kỳ citytrên citiesdanh sách, nó sẽ tự động lựa chọn trên tải.

Đây là Plunker cho việc này: http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview

Xem tài liệu nguồn để biết thêm chi tiết: https://code.angularjs.org/1.3.15/docs/api/ng/directive/select

Tôi nghĩ, sau khi bao gồm 'theo dõi bởi', bạn có thể sử dụng nó trong tùy chọn ng để có được những gì bạn muốn, như sau

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

Cách làm này tốt hơn bởi vì khi bạn muốn thay thế danh sách các chuỗi bằng danh sách các đối tượng, bạn sẽ chỉ thay đổi điều này thành

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

trong đó một cái gì đó là một đối tượng với tên thuộc tính và id, tất nhiên. Xin lưu ý, 'as' không được sử dụng theo cách này để thể hiện các tùy chọn ng, bởi vì nó sẽ chỉ đặt giá trị và bạn sẽ không thể thay đổi nó khi bạn đang sử dụng theo dõi

Câu trả lời được chấp nhận sử dụng ng-init, nhưng tài liệu nói để tránh ng-init nếu có thể.

Việc sử dụng ngInit thích hợp duy nhất là cho các thuộc tính đặc biệt của ngRepeat, như được thấy trong bản demo dưới đây. Bên cạnh trường hợp này, bạn nên sử dụng bộ điều khiển thay vì ngInit để khởi tạo giá trị trên một phạm vi.

Bạn cũng có thể sử dụng ng-repeat thay vì ng-optionscho các tùy chọn của bạn. Với ng-repeat, bạn có thể sử dụng ng-selectedvớing-repeat các thuộc tính đặc biệt. tức là $ index, $ lẻ, $ thậm chí để làm cho công việc này không có bất kỳ mã hóa nào.

$first là một trong những tính chất đặc biệt lặp lại ng.

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

---------------------- EDIT ----------------
Mặc dù điều này hoạt động, tôi thích @ mik-t's trả lời khi bạn biết nên chọn giá trị nào, https://stackoverflow.com/a/29564802/454252 , sử dụng track-byvà ng-optionskhông sử dụng ng-inithoặc ng-repeat.

Câu trả lời này chỉ nên được sử dụng khi bạn phải chọn mục đầu tiên mà không biết nên chọn giá trị nào. ví dụ: tôi đang sử dụng điều này để hoàn thành tự động, đòi hỏi phải chọn mục FIRST mọi lúc.

Giải pháp của tôi cho vấn đề này là sử dụng html để mã hóa tùy chọn mặc định của tôi. Thích như vậy:

Trong 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

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

Tôi muốn tùy chọn mặc định của mình trả về tất cả các giá trị từ api của tôi, đó là lý do tại sao tôi có một giá trị trống. Cũng xin lỗi haml của tôi. Tôi biết đây không phải là câu trả lời trực tiếp cho câu hỏi của OP, nhưng mọi người tìm thấy điều này trên Google. Hy vọng điều này sẽ giúp người khác.

Sử dụng mã dưới đây để điền tùy chọn đã chọn từ mô hình của bạn.

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

Tùy thuộc vào số lượng tùy chọn bạn có, bạn có thể đặt các giá trị của mình vào một mảng và tự động điền các tùy chọn của bạn như thế này

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

Trong trường hợp của tôi, tôi chỉ cần chèn một giá trị ban đầu để báo cho người dùng chọn một tùy chọn, vì vậy, tôi thích mã dưới đây:

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

Khi tôi đã thử một tùy chọn có giá trị! = Của một chuỗi rỗng (null), tùy chọn này được thay thế bằng góc, nhưng, khi đặt một tùy chọn như thế (với giá trị null), chọn apear với tùy chọn này.

Xin lỗi bởi tiếng Anh không tốt của tôi và tôi hy vọng rằng tôi sẽ giúp được gì đó với điều này.

Sử dụng selectvới ngOptionsvà đặt giá trị mặc định:

Xem tài liệu ngOptions để biết thêm ngOptionsví dụ sử dụng.

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

Tài liệu chính thức vềSELECTphần tửHTMLvới ràng buộc dữ liệu góc.

Liên kết selectvới một giá trị không phải chuỗi thông qua ngModelphân tích / định dạng:

(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

Ví dụ khác:

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

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

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

Trong trường hợp của tôi vì mặc định thay đổi theo từng trường hợp trong mẫu. Tôi thêm một thuộc tính tùy chỉnh trong thẻ chọn.

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

trong các chỉ thị tôi đã tạo một tập lệnh kiểm tra giá trị và khi góc đầy sẽ đặt nó vào tùy chọn với giá trị đó được chọn.

 .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()

})

chỉ cần dịch điều này từ coffescript trên bay ít nhất là ý chính của nó là chính xác nếu không phải là điều lỗ.

Đó không phải là cách đơn giản nhất nhưng hãy hoàn thành nó khi giá trị thay đổi

Đáp lại câu trả lời của Ben Lesh , cần có dòng này

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

thay vì

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

Đó là,

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

Đơn giản chỉ cần sử dụng ng-selected="true"như sau:

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

Tôi sẽ đặt mô hình trong bộ điều khiển. Sau đó, lựa chọn sẽ mặc định cho giá trị đó. Vd: html:

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

Bộ điều khiển góc (sử dụng tài nguyên):

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

Cái này làm việc cho tôi

ng-selected="true" 

Nếu bạn đang sử dụng ng-optionsđể kết xuất, bạn thả xuống optioncó cùng giá trị với ng-modal được chọn mặc định. Xem xét ví dụ:

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

Vì vậy, tùy chọn có cùng giá trị list.keyvà selectedItem, được chọn mặc định.

Tôi cần cài đặt mặc định Vui lòng chọn Chọn để không thể chọn. Tôi cũng cần có khả năng thiết lập tùy chọn tùy chọn mặc định.

Tôi đã đạt được điều này theo cách đơn giản sau: Mã JS: // Lật 2 cái này để kiểm tra mặc định đã chọn hoặc không có mặc định với mặc định Vui lòng chọn văn bản //$scope.defaultOption = 0; $ scope.defaultOption = {key: '3', value: 'Tùy chọn 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>         

Tôi hy vọng điều này sẽ giúp người khác có yêu cầu tương tự.

"Hãy chọn" đã được thực hiện thông qua câu trả lời của Joffrey Outtier tại đây .

Nếu bạn có một số thứ thay vì chỉ khởi tạo phần ngày, bạn có thể sử dụng ng-init()bằng cách khai báo nó trong bộ điều khiển của bạn và sử dụng nó trong đầu HTML của bạn. Hàm này sẽ hoạt động giống như một hàm tạo cho bộ điều khiển của bạn và bạn có thể khởi tạo các biến của mình ở đó.

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>

Hãy thử điều này trong bộ điều khiển góc của bạn ...

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

Bạn có thể đặt một giá trị, nhưng bạn đang sử dụng một loại phức tạp và góc sẽ tìm kiếm khóa / giá trị để đặt trong chế độ xem của bạn.

Và, nếu không hoạt động, hãy thử điều này: ng-Tùy chọn = "tùy chọn. Giá trị dưới dạng tùy chọn.name cho tùy chọn trong tùy chọn theo dõi tùy chọn.name"

Tôi nghĩ cách dễ nhất là

 ng-selected="$first"