как использовать ng-option для установки значения по умолчанию выбранного элемента

Я видел документацию директивы Angular select здесь:http://docs.angularjs.org/api/ng.directive:select.
Я не могу понять, как установить значение по умолчанию. Это сбивает с толку:




выберите в качестве метки значение в массиве




вот объект:



{

    "type": "select", 

    "name": "Service",

    "value": "Service 3", 

    "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] 

}


html (рабочий):



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


и затем я пытаюсь добавить атрибут ng-option внутри элемента select, чтобы установить prop.value как опция по умолчанию (не работает).



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


что я делаю не так?

554   10  

10 ответов:

предположим, что объект находится в области:

<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"] 
  };
}

Рабочая Plunkr: http://plnkr.co/edit/wTRXZYEPrZJRizEltQ2g

121  
2014-12-03 00:36:36

The угловая документация для select* не отвечает на этот вопрос явно, но он есть. Если вы посмотрите на script.js, вы увидите это:

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
}

это html:

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

это кажется более очевидным способом дефолта выбранного значения на <select> С ng-options. Также он будет работать, если у вас есть разные метки/значения.

* Это из углового 1.2.7

65  
2014-08-19 18:36:31

этот ответ более полезен, когда вы приносите данные из БД, вносите изменения, а затем сохраняете изменения.

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

Проверьте пример здесь:

http://plnkr.co/edit/HrT5vUMJOtP9esGngbIV

36  
2015-06-03 00:22:43

если Ваш массив объектов сложны, как:

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

и ваша текущая модель была настроена на что-то вроде:

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

это помогло использовать track by функция на uuid (или любое уникальное поле), пока ng-model="пользователь.друг " также имеет uuid:

<select ng-model="user.friend" 
ng-options="friend as friend.name for friend in friends track by friend.uuid"> 
</select>
20  
2015-04-20 21:55:59 
<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>
19  
2014-05-02 13:06:30

я боролся с этим в течение нескольких часов, поэтому я хотел бы добавить некоторые разъяснения для него, все примеры, отмеченные здесь, относятся к случаям, когда данные загружаются из самого скрипта, а не из службы или базы данных, поэтому я хотел бы предоставить свой опыт для тех, кто имеет ту же проблему, что и я.

обычно вы сохраняете только идентификатор нужного параметра в своей базе данных, поэтому... давайте покажем это

сервис.js

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

return models;
});

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

наконец-то частичный html модель.HTML-код

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

в основном я хотел указать эту часть" model.id_model как model.name для модели в моделях" на "модель.id_model" использует идентификатор модели стоимости, так что вы можете матч с "mainObj.id_model", который также является " selected_model", это просто простое значение, также"как model.name "это метка для ретранслятора, наконец"модель в модели " это просто регулярный цикл, о котором мы все знаем.

надеюсь, что это поможет кому-то, и если это так, пожалуйста, проголосуйте :D

10  
2014-08-01 01:27:03 
<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>

просто добавьте опцию с пустым значением. Это сработает.

DEMO Plnkr

9  
2016-06-10 14:22:23

более простой способ сделать это-использовать data-ng-init такой:

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

основное отличие здесь заключается в том, что вам нужно будет включить data-ng-model

8  
2015-07-14 21:12:54

The ng-model атрибут устанавливает выбранный параметр, а также позволяет передавать фильтр, как orderBy: orderModel.значение

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];
3  
2015-06-13 00:48:21

Если кто-то работает в значение по умолчанию иногда не заполняется на странице в Chrome, IE 10/11, Firefox -- попробуйте добавить этот атрибут в поле ввода/выбора, проверяя заполненную переменную в HTML, например:

<input data-ng-model="vm.x" data-ng-if="vm.x !== '' && vm.x !== undefined && vm.x !== null" />
1  
2015-04-16 18:01:43

Comments

    Ничего не найдено.
Click here to cancel reply.