Cách sử dụng tùy chọn ng để đặt giá trị mặc định của phần tử chọn

Tôi đã xem tài liệu của chỉ thị chọn Angular tại đây: http://docs.angularjs.org/api/ng.directive:select . Tôi không thể tìm cách đặt giá trị mặc định. Điều này thật khó hiểu:

chọn làm nhãn cho giá trị trong mảng

Đây là đối tượng:

{
    "type": "select", 
    "name": "Service",
    "value": "Service 3", 
    "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] 
}

Html (đang hoạt động):

<select><option ng-repeat="value in prop.values">{{value}}</option></select>

và sau đó tôi đang cố gắng thêm một thuộc tính tùy chọn ng bên trong phần tử select để đặt prop.valuelàm tùy chọn mặc định (không hoạt động).

ng-options="(prop.value) for v in prop.values"

Tôi đang làm gì sai?

Vì vậy, giả sử đối tượng đó nằm trong phạm vi của bạn:

<div ng-controller="MyCtrl">
  <select ng-model="prop.value" ng-options="v for v in prop.values">
  </select>
</div>

function MyCtrl($scope) {
  $scope.prop = {
    "type": "select", 
    "name": "Service",
    "value": "Service 3", 
    "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] 
  };
}

Làm việc Plunkr: http://plnkr.co/edit/wTRXZYEPrZJRizEltQ2g

Các tài liệu góc cho chọn * không trả lời câu hỏi này một cách rõ ràng, nhưng nó là ở đó. Nếu bạn nhìn vào script.js, bạn sẽ thấy điều này:

function MyCntrl($scope) {
  $scope.colors = [
    {name:'black', shade:'dark'},
    {name:'white', shade:'light'},
    {name:'red', shade:'dark'},
    {name:'blue', shade:'dark'},
    {name:'yellow', shade:'light'}
  ];
  $scope.color = $scope.colors[2]; // Default the color to red
}

Đây là html:

<select ng-model="color" ng-options="c.name for c in colors"></select>

Điều này dường như là một cách rõ ràng hơn của mặc định một giá trị được lựa chọn trên một <select>với ng-options. Ngoài ra, nó sẽ hoạt động nếu bạn có nhãn / giá trị khác nhau.

* Đây là từ Angular 1.2.7

Câu trả lời này hữu ích hơn khi bạn mang dữ liệu từ DB, thực hiện sửa đổi và sau đó duy trì các thay đổi.

 <select  ng-options="opt.id as opt.name for opt in users" ng-model="selectedUser"></select>

Kiểm tra ví dụ ở đây:

http://plnkr.co/edit/HrT5vUMJOtP9esGngbIV

<select name='partyid' id="partyid" class='span3'>
<option value=''>Select Party</option>
<option ng-repeat="item in partyName" value="{{item._id}}" ng-selected="obj.partyname == item.partyname">{{item.partyname}}
</option>
</select>

Nếu mảng đối tượng của bạn phức tạp như:

$scope.friends = [{ name: John , uuid: 1234}, {name: Joe, uuid, 5678}];

Và mô hình hiện tại của bạn đã được đặt thành một cái gì đó như:

$scope.user.friend = {name:John, uuid: 1234};

Nó đã giúp sử dụng track bychức năng trên uuid (hoặc bất kỳ trường duy nhất nào), miễn là ng-model = "user.friend" cũng có uuid:

<select ng-model="user.friend" 
ng-options="friend as friend.name for friend in friends track by friend.uuid"> 
</select>

Tôi đã vật lộn với điều này trong một vài giờ, vì vậy tôi muốn thêm một số giải thích cho nó, tất cả các ví dụ được lưu ý ở đây, đề cập đến các trường hợp dữ liệu được tải từ chính tập lệnh, không phải thứ gì đó đến từ dịch vụ hoặc cơ sở dữ liệu, vì vậy tôi muốn cung cấp kinh nghiệm của mình cho bất cứ ai có cùng vấn đề như tôi đã làm.

Thông thường bạn chỉ lưu id của tùy chọn mong muốn trong cơ sở dữ liệu của mình, vì vậy ... hãy hiển thị nó

dịch vụ

myApp.factory('Models', function($http) {
var models = {};
models.allModels = function(options) {
    return $http.post(url_service, {options: options});
};

return models;
});

control.js

myApp.controller('exampleController', function($scope, Models) {
$scope.mainObj={id_main: 1, id_model: 101};
$scope.selected_model = $scope.mainObj.id_model;
Models.allModels({}).success(function(data) {
    $scope.models = data; 
});
});

Cuối cùng là mô hình html một phần.html

Model: <select ng-model="selected_model" 
ng-options="model.id_model as model.name for model in models" ></select>

về cơ bản tôi muốn chỉ ra đoạn đó " model.id_model là model.name cho mô hình trong các mô hình ", " model.id_model " sử dụng id của mô hình cho giá trị để bạn có thể khớp với " mainObj.id_model ". các " selected_model ", đây chỉ là một giá trị đơn giản, cũng " như model.name " là nhãn cho repeater, cuối cùng " mô hình trong mô hình " chỉ là chu kỳ bình thường mà tất cả chúng ta biết về.

Hy vọng điều này sẽ giúp được ai đó, và nếu có, xin hãy bỏ phiếu: D

<select id="itemDescFormId" name="itemDescFormId" size="1" ng-model="prop" ng-change="update()">
    <option value="">English(EN)</option>
    <option value="23">Corsican(CO)</option>
    <option value="43">French(FR)</option>
    <option value="16">German(GR)</option>

Chỉ cần thêm tùy chọn với giá trị trống. Nó sẽ làm việc.

DEMO Plnkr

Một cách dễ dàng hơn để làm điều đó là sử dụng data-ng-init như thế này:

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

Sự khác biệt chính ở đây là bạn sẽ cần bao gồm data-ng-model

Các ng mô hình thuộc tính thiết lập tùy chọn lựa chọn và cũng cho phép bạn ống một bộ lọc như orderBy: orderModel.value

index.html

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

controllers.js

$scope.orderOptions = [
    {"name":"Newest","value":"age"},
    {"name":"Alphabetical","value":"name"}
];

$scope.orderModel = $scope.orderOptions[0];

Nếu bất cứ ai đang chạy vào giá trị mặc định thỉnh thoảng không được điền trên trang trong Chrome, IE 10/11, Firefox - hãy thử thêm thuộc tính này vào trường nhập / chọn của bạn để kiểm tra biến được điền trong HTML, như vậy:

<input data-ng-model="vm.x" data-ng-if="vm.x !== '' && vm.x !== undefined && vm.x !== null" />

Thực sự đơn giản nếu bạn không quan tâm đến việc lập chỉ mục các tùy chọn của mình với một số id số.

1. Khai báo var scope var - people của bạn

   $scope.people= ["", "YOU", "ME"];

2. Trong DOM của phạm vi trên, tạo đối tượng

   <select ng-model="hired" ng-options = "who for who in people"></select>

3. Trong bộ điều khiển của bạn, bạn đặt mô hình ng "được thuê".

   $scope.hired = "ME";

Chúc may mắn!!! Nó thực sự dễ dàng!

Chỉ để thêm, tôi đã làm một cái gì đó như thế này.

 <select class="form-control" data-ng-model="itemSelect" ng-change="selectedTemplate(itemSelect)" autofocus>
        <option value="undefined" [selected]="itemSelect.Name == undefined" disabled="disabled">Select template...</option>
        <option ng-repeat="itemSelect in templateLists" value="{{itemSelect.ID}}">{{itemSelect.Name}}</option></select>