Đây là những gì dường như đang làm phiền rất nhiều người (bao gồm cả tôi).

Khi sử dụng lệnh ng-optionstrong AngularJS để điền vào các tùy chọn cho <select>thẻ, tôi không thể tìm ra cách đặt giá trị cho một tùy chọn. Tài liệu cho việc này thực sự không rõ ràng - ít nhất là đối với một người đơn giản như tôi.

Tôi có thể đặt văn bản cho một tùy chọn dễ dàng như vậy:

ng-options="select p.text for p in resultOptions"

Khi nào resultOptionslà ví dụ:

[
    {
        "value": 1,
        "text": "1st"
    },
    {
        "value": 2,
        "text": "2nd"
    }
]

Nó nên là (và có lẽ là) điều đơn giản nhất để đặt các giá trị tùy chọn, nhưng cho đến nay tôi chỉ không nhận được nó.

Xem ngOptions

ngOptions (tùy chọn) - { comprehension_expression=} - theo một trong các hình thức sau:

Đối với nguồn dữ liệu mảng : label for value in array select as label for value in array label group by group for value in array select as label group by group for value in array track by trackexpr Đối với nguồn dữ liệu đối tượng: label for (key , value) in object select as label for (key , value) in object label group by group for (key, value) in object select as label group by group for (key, value) in object

Trong trường hợp của bạn, nó nên được

array = [{ "value": 1, "text": "1st" }, { "value": 2, "text": "2nd" }];

<select ng-options="obj.value as obj.text for obj in array"></select>

Cập nhật

Với các bản cập nhật trên AngularJS, giờ đây có thể đặt giá trị thực cho valuethuộc tính của selectphần tử có track bybiểu thức.

<select ng-options="obj.text for obj in array track by obj.value">
</select>

Làm thế nào để nhớ những thứ xấu xí này

Đối với tất cả những người đang gặp khó khăn để nhớ mẫu cú pháp này: Tôi đồng ý đây không phải là cú pháp dễ nhất hoặc đẹp nhất. Cú pháp này là một phiên bản mở rộng của việc hiểu danh sách của Python và biết rằng điều đó giúp tôi nhớ cú pháp rất dễ dàng. Nó giống như thế này:

Mã Python:

my_list = [x**2 for x in [1, 2, 3, 4, 5]]
> [1, 4, 9, 16, 25]

# Let people to be a list of person instances
my_list2 = [person.name for person in people]
> my_list2 = ['Alice', 'Bob']

Đây thực sự là cú pháp giống như cú pháp đầu tiên được liệt kê ở trên. Tuy nhiên, trong <select>chúng ta thường cần phân biệt giữa giá trị thực trong mã và văn bản được hiển thị (nhãn) trong một <select>phần tử.

Giống như, chúng tôi cần person.idtrong mã, nhưng chúng tôi không muốn hiển thị idcho người dùng; chúng tôi muốn thể hiện tên của nó Tương tự như vậy, chúng tôi không quan tâm đến person.namemã. Có astừ khóa để nhãn công cụ. Vì vậy, nó trở thành như thế này:

person.id as person.name for person in people

Hoặc, thay vì person.idchúng ta có thể cần personcá thể / tham chiếu chính nó. Xem bên dưới:

person as person.name for person in people

Đối với các đối tượng JavaScript, phương thức tương tự cũng được áp dụng. Chỉ cần nhớ rằng các mục trong đối tượng được giải mã với (key, value)các cặp.

Làm thế nào các thuộc tính giá trị nhận được giá trị của nó:

• Khi sử dụng một mảng làm nguồn dữ liệu, nó sẽ là chỉ mục của phần tử mảng trong mỗi lần lặp;
• Khi sử dụng một đối tượng làm nguồn dữ liệu, nó sẽ là tên thuộc tính trong mỗi lần lặp.

Vì vậy, trong trường hợp của bạn, nó nên là:

obj = { '1': '1st', '2': '2nd' };

<select ng-options="k as v for (k,v) in obj"></select>

Tôi cũng có vấn đề này Tôi không thể đặt giá trị của mình trong tùy chọn ng. Mọi tùy chọn đã được tạo được đặt với 0, 1, ..., n.

Để làm cho đúng, tôi đã làm một cái gì đó như thế này trong tùy chọn ng của mình:

HTML:

<select ng-options="room.name for room in Rooms track by room.price">
    <option value="">--Rooms--</option>
</select>

Tôi sử dụng "theo dõi" để đặt tất cả các giá trị của mình với room.price.

(Ví dụ này rất tệ: bởi vì nếu có nhiều hơn một giá bằng nhau, mã sẽ thất bại. Vì vậy, hãy ĐÚNG để có các giá trị khác nhau.)

JSON:

$scope.Rooms = [
            { name: 'SALA01', price: 100 },
            { name: 'SALA02', price: 200 },
            { name: 'SALA03', price: 300 }
        ];

Tôi đã học được nó từ bài đăng trên blog Cách đặt giá trị được chọn ban đầu của một phần tử được chọn bằng Angular.JS ng-tùy chọn & theo dõi .

Xem video. Đó là một lớp học tốt :)

Nếu bạn muốn thay đổi giá trị của các optionthành phần của mình vì biểu mẫu cuối cùng sẽ được gửi đến máy chủ, thay vì thực hiện việc này,

<select name="text" ng-model="text" ng-options="select p.text for p in resultOptions"></select>

Bạn có thể làm được việc này:

<select ng-model="text" ng-options="select p.text for p in resultOptions"></select>
<input type="hidden" name="text" value="{{ text }}" />

Giá trị dự kiến ​​sau đó sẽ được gửi qua biểu mẫu dưới tên chính xác.

Để gửi một giá trị tùy chỉnh được gọi my_herođến máy chủ bằng cách sử dụng biểu mẫu thông thường:

JSON:

"heroes": [
  {"id":"iron", "label":"Iron Man Rocks!"},
  {"id":"super", "label":"Superman Rocks!"}
]

HTML:

<select ng-model="hero" ng-options="obj.id as obj.label for obj in heroes"></select>
<input type="hidden" name="my_hero" value="{{hero}}" />

Máy chủ sẽ nhận được ironhoặc superlà giá trị của my_hero.

Điều này tương tự như câu trả lời của @neemzy , nhưng chỉ định dữ liệu riêng cho valuethuộc tính.

Nó có vẻ ng-optionsphức tạp (có thể gây khó chịu) để sử dụng, nhưng trong thực tế, chúng tôi có một vấn đề kiến ​​trúc.

AngularJS phục vụ như một khung MVC cho ứng dụng HTML + JavaScript động. Trong khi thành phần (V) iew của nó cung cấp "tạo khuôn mẫu" HTML, mục đích chính của nó là kết nối các hành động của người dùng, thông qua bộ điều khiển, với các thay đổi trong mô hình. Do đó , mức độ trừu tượng thích hợp, từ đó hoạt động trong AngularJS, là một phần tử được chọn đặt một giá trị trong mô hình thành một giá trị từ một truy vấn .

• Làm thế nào một hàng truy vấn được trình bày cho người dùng là mối quan tâm của (V) iew và ng-optionscung cấp fortừ khóa để chỉ ra nội dung của thành phần tùy chọn nên là gì p.text for p in resultOptions .
• Làm thế nào một hàng được chọn được trình bày cho máy chủ là mối quan tâm của (M) odel. Do đó, ng-optionscung cấp astừ khóa để xác định giá trị nào được cung cấp cho mô hình như trong k as v for (k,v) in objects.

Giải pháp chính xác là vấn đề này về bản chất là kiến ​​trúc và liên quan đến việc tái cấu trúc HTML của bạn để odel (M) thực hiện giao tiếp máy chủ khi được yêu cầu (thay vì người dùng gửi biểu mẫu).

Nếu một trang MVC HTML không cần thiết phải xử lý quá mức cho vấn đề: thì chỉ sử dụng phần tạo HTML của thành phần iew (V) của AngularJS. Trong trường hợp này, hãy làm theo cùng một mẫu được sử dụng để tạo các phần tử, chẳng hạn như <li />dưới <ul />và lặp lại ng trên một phần tử tùy chọn:

<select name=“value”>
    <option ng-repeat=“value in Model.Values” value=“{{value.value}}”>
        {{value.text}}
    </option>
</select>

Như kludge , người ta có thể di chuyển các thuộc tính tên của yếu tố lựa chọn đến một yếu tố đầu vào ẩn:

<select ng-model=“selectedValue” ng-options=“value.text for value in Model.Values”>
</select>
<input type=“hidden” name=“value” value=“{{selectedValue}}” />

Bạn có thể làm được việc này:

<select ng-model="model">
    <option value="">Select</option>
    <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>

- CẬP NHẬT

Sau một số cập nhật, giải pháp của người dùng frm.adiputra sẽ tốt hơn nhiều. Mã số:

obj = { '1': '1st', '2': '2nd' };
<select ng-options="k as v for (k,v) in obj"></select>

Tôi đã đấu tranh với vấn đề này trong một thời gian ngày hôm nay. Tôi đọc qua tài liệu AngularJS, bài này và các bài đăng khác và một vài blog họ dẫn đến. Tất cả đều giúp tôi ghi lại những chi tiết tốt hơn, nhưng cuối cùng thì đây dường như là một chủ đề khó hiểu. Chủ yếu là do nhiều sắc thái cú pháp của ng-options.

Cuối cùng, đối với tôi, nó giảm xuống ít hơn.

Đưa ra một phạm vi được cấu hình như sau:

        //Data used to populate the dropdown list
        $scope.list = [
           {"FirmnessID":1,"Description":"Soft","Value":1},         
           {"FirmnessID":2,"Description":"Medium-Soft","Value":2},
           {"FirmnessID":3,"Description":"Medium","Value":3}, 
           {"FirmnessID":4,"Description":"Firm","Value":4},     
           {"FirmnessID":5,"Description":"Very Firm","Value":5}];

        //A record or row of data that is to be save to our data store.
        //FirmnessID is a foreign key to the list specified above.
        $scope.rec = {
           "id": 1,
           "FirmnessID": 2
        };

Đây là tất cả những gì tôi cần để có được kết quả mong muốn:

        <select ng-model="rec.FirmnessID"
                ng-options="g.FirmnessID as g.Description for g in list">
            <option></option>
        </select>   

Thông báo tôi đã không sử dụng track by. Sử dụng track bymục đã chọn sẽ luôn trả về đối tượng phù hợp với FirmnessID, thay vì chính FirmnessID. Điều này hiện đáp ứng các tiêu chí của tôi, đó là nó sẽ trả về một giá trị số chứ không phải đối tượng và sử dụng ng-optionsđể đạt được sự cải thiện hiệu suất mà nó cung cấp bằng cách không tạo phạm vi mới cho mỗi tùy chọn được tạo.

Ngoài ra, tôi cần thiết hàng đầu tiên trống, vì vậy tôi chỉ cần thêm một <option>đến <select>phần tử.

Đây là một Plunkr cho thấy công việc của tôi.

Thay vì sử dụng tính năng 'theo dõi mới, bạn chỉ cần thực hiện việc này với một mảng nếu bạn muốn các giá trị giống với văn bản:

<select ng-options="v as v for (k,v) in Array/Obj"></select>

Lưu ý sự khác biệt giữa cú pháp tiêu chuẩn, sẽ làm cho các giá trị trở thành các khóa của Object / Array và do đó 0,1,2, v.v. cho một mảng:

<select ng-options"k as v for (k,v) in Array/Obj"></select>

k như v trở thành v như v .

Tôi phát hiện ra điều này chỉ dựa trên ý thức chung nhìn vào cú pháp. (k, v) là câu lệnh thực tế phân chia mảng / đối tượng thành các cặp giá trị khóa.

Trong câu lệnh 'k as v', k sẽ là giá trị và v sẽ là tùy chọn văn bản được hiển thị cho người dùng. Tôi nghĩ rằng 'theo dõi' là lộn xộn và quá mức cần thiết.

Điều này phù hợp nhất cho tất cả các kịch bản theo tôi:

<select ng-model="mySelection.value">
   <option ng-repeat="r in myList" value="{{r.Id}}" ng-selected="mySelection.value == r.Id">{{r.Name}}
   </option>
</select>

nơi bạn có thể sử dụng mô hình của mình để liên kết dữ liệu. Bạn sẽ nhận được giá trị như đối tượng sẽ chứa và lựa chọn mặc định dựa trên kịch bản của bạn.

Đây là cách tôi giải quyết điều này. Tôi đã theo dõi lựa chọn theo giá trị và đặt thuộc tính mục đã chọn thành mô hình trong mã JavaScript của mình.

Countries =
[
    {
        CountryId = 1, Code = 'USA', CountryName = 'United States of America'
    },
    {
       CountryId = 2, Code = 'CAN', CountryName = 'Canada'
    }
]

<select ng-model="vm.Enterprise.AdminCountry" ng-options="country.CountryName for country in vm.Countries track by country.CountryId">

vmlà bộ điều khiển của tôi và Quốc gia trong bộ điều khiển được truy xuất từ ​​dịch vụ {CountryId =1, Code = 'USA', CountryName='United States of America'}.

Khi tôi chọn một quốc gia khác từ danh sách thả xuống được chọn và đăng trang của mình với "Lưu", tôi đã giới hạn quốc gia chính xác.

Lệnh ng-optionskhông đặt thuộc tính giá trị trên các <options>phần tử cho mảng:

Sử dụng limit.value as limit.text for limit in limitsphương tiện:

đặt <option>nhãn của là limit.text
lưu limit.valuegiá trị vào vùng chọnng-model

Xem câu hỏi Stack Overflow AngularJS ng-tùy chọn không hiển thị giá trị .

<select ng-model="color" ng-options="(c.name+' '+c.shade) for c in colors"></select><br>

Bạn có thể sử dụng tùy chọn ng để đạt được ràng buộc thẻ chọn với giá trị và hiển thị thành viên

Trong khi sử dụng nguồn dữ liệu này

countries : [
              {
                 "key": 1,
                 "name": "UAE"
             },
              {
                  "key": 2,
                  "name": "India"
              },
              {
                  "key": 3,
                  "name": "OMAN"
              }
         ]

bạn có thể sử dụng bên dưới để liên kết thẻ chọn của bạn với giá trị và tên

<select name="text" ng-model="name" ng-options="c.key as c.name for c in countries"></select>

nó hoạt động rất tốt

Câu trả lời chính xác cho câu hỏi này đã được cung cấp bởi người dùng frm.adiputra , vì hiện tại đây dường như là cách duy nhất để kiểm soát rõ ràng thuộc tính giá trị của các thành phần tùy chọn.

Tuy nhiên, tôi chỉ muốn nhấn mạnh rằng "select" không phải là một từ khóa trong ngữ cảnh này, mà nó chỉ là một giữ chỗ cho một biểu thức. Vui lòng tham khảo danh sách sau đây, để biết định nghĩa của biểu thức "chọn" cũng như các biểu thức khác có thể được sử dụng trong chỉ thị ng-tùy chọn.

Việc sử dụng select như được mô tả trong câu hỏi:

ng-options='select p.text for p  in resultOptions'

về cơ bản là sai.

Dựa trên danh sách các biểu thức, có vẻ như trackexpr có thể được sử dụng để chỉ định giá trị, khi các tùy chọn được đưa ra trong một mảng các đối tượng, nhưng nó chỉ được sử dụng với nhóm.

Từ tài liệu của AngularJS cho các tùy chọn ng:

• mảng / đối tượng : một biểu thức ước lượng thành một mảng / đối tượng để lặp lại.
• giá trị : biến cục bộ sẽ tham chiếu đến từng mục trong mảng hoặc từng giá trị thuộc tính của đối tượng trong quá trình lặp.
• Chìa khóa : biến cục bộ sẽ tham chiếu đến một tên thuộc tính trong đối tượng trong quá trình lặp.
• nhãn : Kết quả của biểu thức này sẽ là nhãn cho phần tử. Biểu thức rất có thể sẽ đề cập đến biến giá trị (ví dụ value.propertyName).
• lựa chọn : Kết quả của biểu thức này sẽ được liên kết với mô hình của phần tử cha. Nếu không được chỉ định, chọn biểu thức sẽ mặc định thành giá trị.
• nhóm : Kết quả của biểu thức này sẽ được sử dụng cho các tùy chọn nhóm bằng cách sử dụng phần tử DOM.
• trackexpr : Được sử dụng khi làm việc với một mảng các đối tượng. Kết quả của biểu thức này sẽ được sử dụng để xác định các đối tượng trong mảng. Trackexpr rất có thể sẽ đề cập đến biến giá trị (ví dụ value.propertyName).

Chọn một mục trong tùy chọn ng có thể hơi khó khăn tùy thuộc vào cách bạn đặt nguồn dữ liệu.

Sau một thời gian vật lộn với họ, cuối cùng tôi đã tạo ra một mẫu với hầu hết các nguồn dữ liệu phổ biến mà tôi sử dụng. Bạn có thể tìm thấy nó ở đây:

http://plnkr.co/edit/fGq2PM?p=preview

Bây giờ để làm cho các tùy chọn ng hoạt động, đây là một số điều cần xem xét:

1. Thông thường bạn nhận được các tùy chọn từ một nguồn và giá trị được chọn từ nguồn khác. Ví dụ:
   • trạng thái :: dữ liệu cho các tùy chọn ng
   • user.state :: Tùy chọn để đặt như đã chọn
2. Dựa trên 1, điều dễ nhất / hợp lý nhất là điền vào vùng chọn bằng một nguồn và sau đó đặt mã máng giá trị được chọn. Hiếm khi tốt hơn để có được một bộ dữ liệu hỗn hợp.
3. AngularJS cho phép các điều khiển chọn giữ nhiều hơn key | label. Nhiều ví dụ trực tuyến đặt các đối tượng làm 'khóa' và nếu bạn cần thông tin từ đối tượng, hãy đặt nó theo cách đó, nếu không thì sử dụng thuộc tính cụ thể mà bạn cần làm khóa. (ID, CODE, v.v. Như trong mẫu plckr)

4. Cách đặt giá trị của điều khiển thả xuống / chọn tùy thuộc vào số 3,

   • Nếu khóa thả xuống là một thuộc tính duy nhất (như trong tất cả các ví dụ trong plunkr), bạn chỉ cần đặt nó, ví dụ: $scope.dropdownmodel = $scope.user.state;

   • Nếu bạn đặt đối tượng làm khóa, bạn cần lặp lại các tùy chọn, thậm chí việc gán đối tượng sẽ không đặt mục như đã chọn vì chúng sẽ có các hàm băm khác nhau, ví dụ:

     for (var i = 0, len = $scope.options.length; i < len; i++) {
       if ($scope.options[i].id == savedValue) { // Your own property here:
         console.log('Found target! ');
         $scope.value = $scope.options[i];
         break;
       }
     }

Bạn có thể thay thế tệpValue cho cùng một thuộc tính trong đối tượng khác , $scope.myObject.myProperty.

Đối với tôi câu trả lời của Bruno Gomes là câu trả lời tốt nhất.

Nhưng thực tế, bạn không cần phải lo lắng về việc đặt thuộc tính giá trị của các tùy chọn được chọn. AngularJS sẽ chăm sóc điều đó. Hãy để tôi giải thích chi tiết.

Hãy xem xét câu đố này

angular.module('mySettings', []).controller('appSettingsCtrl', function ($scope) {

    $scope.timeFormatTemplates = [{
        label: "Seconds",
        value: 'ss'
    }, {
        label: "Minutes",
        value: 'mm'
    }, {
        label: "Hours",
        value: 'hh'
    }];


    $scope.inactivity_settings = {
        status: false,
        inactive_time: 60 * 5 * 3, // 15 min (default value), that is, 900 seconds
        //time_format: 'ss', // Second (default value)
        time_format: $scope.timeFormatTemplates[0], // Default seconds object
    };

    $scope.activity_settings = {
        status: false,
        active_time: 60 * 5 * 3, // 15 min (default value), that is,  900 seconds
        //time_format: 'ss', // Second (default value)
        time_format: $scope.timeFormatTemplates[0], // Default seconds object
    };

    $scope.changedTimeFormat = function (time_format) {
        'use strict';

        console.log('time changed');
        console.log(time_format);
        var newValue = time_format.value;

        // do your update settings stuffs
    }
});

Như bạn có thể thấy trong đầu ra fiddle, bất cứ điều gì bạn chọn cho các tùy chọn hộp chọn, đó là giá trị tùy chỉnh của bạn hoặc giá trị được tạo tự động 0, 1, 2 của AngularJS, điều đó không quan trọng trong đầu ra của bạn trừ khi bạn đang sử dụng jQuery hoặc bất kỳ thư viện khác để truy cập giá trị của các tùy chọn hộp tổ hợp chọn đó và thao tác với nó.

Một năm sau câu hỏi, tôi đã phải tìm một câu trả lời cho câu hỏi này vì không ai trong số này đưa ra câu trả lời thực tế, ít nhất là cho tôi.

Bạn đã hỏi làm thế nào để chọn tùy chọn, nhưng không ai nói rằng hai điều này KHÔNG giống nhau:

Nếu chúng ta có một tùy chọn như thế này:

$scope.options = [
    { label: 'one', value: 1 },
    { label: 'two', value: 2 }
  ];

Và chúng tôi cố gắng đặt một tùy chọn mặc định như thế này:

$scope.incorrectlySelected = { label: 'two', value: 2 };

Nó sẽ KHÔNG hoạt động, nhưng nếu bạn cố gắng chọn tùy chọn như thế này:

$scope.correctlySelected = $scope.options[1];

Nó sẽ làm việc .

Mặc dù hai đối tượng này có cùng thuộc tính, AngularJS đang xem chúng là KHÁC BIỆT vì AngularJS so sánh bằng tham chiếu .

Hãy xem fiddle http://jsfiddle.net/qWzTb/ .

Vui lòng sử dụng theo dõi bởi thuộc tính phân biệt các giá trị và nhãn trong hộp chọn.

Vui lòng thử

<select ng-options="obj.text for obj in array track by obj.value"></select>

sẽ gán nhãn với văn bản và giá trị với giá trị (từ mảng)

Đối với một đối tượng:

<select ng-model="mySelect" ng-options="key as value for (key, value) in object"></select>

Nó luôn luôn đau đớn cho các nhà phát triển với các tùy chọn ng. Ví dụ: Lấy một giá trị được chọn trống / trống trong thẻ chọn. Đặc biệt là khi làm việc với các đối tượng JSON trong các tùy chọn ng, nó trở nên tẻ nhạt hơn. Ở đây tôi đã thực hiện một số bài tập về điều đó.

Mục tiêu: Lặp lại mảng các đối tượng JSON thông qua tùy chọn ng và đặt phần tử đầu tiên được chọn.

Dữ liệu:

someNames = [{"id":"1", "someName":"xyz"}, {"id":"2", "someName":"abc"}]

Trong thẻ chọn tôi phải hiển thị xyz và abc, trong đó xyz phải được chọn mà không cần nỗ lực nhiều.

HTML:

<pre class="default prettyprint prettyprinted" style=""><code>
    &lt;select class="form-control" name="test" style="width:160px"    ng-options="name.someName for name in someNames" ng-model="testModel.test" ng-selected = "testModel.test = testModel.test || someNames[0]"&gt;
&lt;/select&gt;
</code></pre>

Bằng mẫu mã ở trên, bạn có thể thoát khỏi sự phóng đại này.

Một tài liệu tham khảo khác :

Hướng dẫn ANGULAR.JS: NG-CHỌN VÀ NG-CHỌN đã giúp tôi giải quyết vấn đề:

<select id="countryId"
  class="form-control"
  data-ng-model="entity.countryId"
  ng-options="value.dataValue as value.dataText group by value.group for value in countries"></select>

<select ng-model="output">
   <option ng-repeat="(key,val) in dictionary" value="{{key}}">{{val}}</option>
</select>

Chạy đoạn mã và xem các biến thể. Đây là lưu ý để hiểu nhanh

1. Ví dụ 1 (Lựa chọn đối tượng): - ng-option="os.name for os in osList track by os.id". Đây track by os.idlà điều quan trọng & nên có và os.id as KHÔNG nên có trước đây os.name.

   • Các ng-model="my_os"cần thiết cho một đối tượng với phím như id như my_os={id: 2}.

2. Ví dụ 2 (Lựa chọn giá trị): - ng-option="os.id as os.name for os in osList". Ở đây track by os.id KHÔNG nên ở đó và os.id as nên ở đó trước os.name.

   • Các ng-model="my_os"nên thiết lập một giá trị nhưmy_os= 2

Đoạn mã còn lại sẽ giải thích.

angular.module('app', []).controller('ctrl', function($scope, $timeout){
  
  //************ EXAMPLE 1 *******************
  $scope.osList =[
    { id: 1, name :'iOS'},
    { id: 2, name :'Android'},
    { id: 3, name :'Windows'}
  ]
  $scope.my_os = {id: 2};
  
  
  //************ EXAMPLE 2 *******************
  $timeout(function(){
    $scope.siteList = [
          { id: 1, name: 'Google'},
          { id: 2, name: 'Yahoo'},
          { id: 3, name: 'Bing'}
        ];
   }, 1000);
    
    $scope.my_site = 2;
  
    $timeout(function(){
      $scope.my_site = 3;
    }, 2000);
})

fieldset{
  margin-bottom: 40px;
  }
strong{
  color:red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.10/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">

  <!--//************ EXAMPLE 1 *******************-->
  <fieldset>
    <legend>Example 1 (Set selection as <strong>object</strong>)</legend>
    
    <select ng-model="my_os" ng-options="os.name for os in osList track by os.id">
        <option value="">--Select--</option>
      </select>
    {{my_os}}
    
  </fieldset>
  
  
  <!--//************ EXAMPLE 2 *******************-->
  <fieldset>
    <legend>Example 2 (Set selection as <strong>value</strong>. Simulate ajax)</legend>
      <select ng-model="my_site" ng-options="site.id as site.name for site in siteList">
        <option value="">--Select--</option>
      </select>
      {{my_site}}
  </fieldset>
  
</div>

Giống như nhiều người đã nói trước đây, nếu tôi có dữ liệu như thế này:

countries : [
              {
                 "key": 1,
                 "name": "UAE"
             },
              {
                  "key": 2,
                  "name": "India"
              },
              {
                  "key": 3,
                  "name": "OMAN"
              }
         ]

Tôi sẽ sử dụng nó như:

<select
    ng-model="selectedCountry"
    ng-options="obj.name for obj  in countries">
</select>

Trong Trình điều khiển của bạn, bạn cần đặt giá trị ban đầu để loại bỏ mục trống đầu tiên:

 $scope.selectedCountry = $scope.countries[0];

 // You need to watch changes to get selected value
 $scope.$watchCollection(function() {
   return $scope.selectedCountry
 }, function(newVal, oldVal) {
     if (newVal === oldVal) {
       console.log("nothing has changed " + $scope.selectedCountry)
     } 
     else {
       console.log('new value ' + $scope.selectedCountry)
     }
 }, true)

Đây là cách tôi giải quyết vấn đề này trong một ứng dụng cũ:

Trong HTML:

ng-options="kitType.name for kitType in vm.kitTypes track by kitType.id" ng-model="vm.itemTypeId"

Trong JavaScript:

vm.kitTypes = [
    {"id": "1", "name": "Virtual"},
    {"id": "2", "name": "Physical"},
    {"id": "3", "name": "Hybrid"}
];

...

vm.itemTypeId = vm.kitTypes.filter(function(value, index, array){
    return value.id === (vm.itemTypeId || 1);
})[0];

HTML của tôi hiển thị giá trị tùy chọn đúng.

Chỉ thị ngOptions:

$scope.items = [{name: 'a', age: 20},{ name: 'b', age: 30},{ name: 'c', age: 40}];

• Trường hợp-1) nhãn cho giá trị trong mảng:

  <div>
      <p>selected item is : {{selectedItem}}</p>
      <p> age of selected item is : {{selectedItem.age}} </p>
      <select ng-model="selectedItem" ng-options="item.name for item in items">
      </select>
  </div>

Giải thích đầu ra (Giả sử mục thứ 1 được chọn):

selectItem = {name: 'a', age: 20} // [theo mặc định, mục được chọn bằng với mục giá trị ]

đã chọnItem.age = 20

• Trường hợp-2) chọn làm nhãn cho giá trị trong mảng:

  <div>
      <p>selected item is : {{selectedItem}}</p>
      <select ng-model="selectedItem" ng-options="item.age as item.name for item in items">
      </select>
  </div>

Giải thích đầu ra (Giả sử mục thứ 1 được chọn): chọnItem = 20 // [phần chọn là item.age ]