angularjs - funciona - cómo usar la opción ng para establecer el valor predeterminado del elemento seleccionado
ng-options selected (10)
Asumiendo que ese objeto está en su alcance:
<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"]
};
}
Trabajando Plunkr: http://plnkr.co/edit/wTRXZYEPrZJRizEltQ2g
He visto la documentación de la directiva de selección angular aquí: http://docs.angularjs.org/api/ng.directive:select . No puedo entender cómo configurar el valor predeterminado. Esto es confuso:
seleccionar como etiqueta de valor en matriz
Aquí está el objeto:
{
"type": "select",
"name": "Service",
"value": "Service 3",
"values": [ "Service 1", "Service 2", "Service 3", "Service 4"]
}
El html (trabajo):
<select><option ng-repeat="value in prop.values">{{value}}</option></select>
y luego estoy tratando de agregar un atributo ng-option dentro del elemento select para establecer prop.value
como la opción predeterminada (no funciona).
ng-options="(prop.value) for v in prop.values"
¿Qué estoy haciendo mal?
El atributo ng-model establece la opción seleccionada y también le permite canalizar un filtro como 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];
Esta respuesta es más útil cuando traes datos de un DB, realizas modificaciones y luego persistes los cambios.
<select ng-options="opt.id as opt.name for opt in users" ng-model="selectedUser"></select>
Vea el ejemplo aquí:
La http://docs.angularjs.org/api/ng.directive:select * no responde esta pregunta explícitamente, pero está allí. Si miras el script.js
, verás esto:
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
}
Este es el html:
<select ng-model="color" ng-options="c.name for c in colors"></select>
Esta parece ser una forma más obvia de predeterminar un valor seleccionado en un <select>
con ng-options
. También funcionará si tiene etiquetas / valores diferentes.
*
Esto es de Angular 1.2.7
Luché con esto durante un par de horas, por lo que me gustaría añadir algunas aclaraciones, todos los ejemplos que se mencionan aquí se refieren a casos en los que los datos se cargan desde el script en sí, no provienen de un servicio o una base de datos, entonces me gustaría brindar mi experiencia a cualquiera que tenga el mismo problema que yo.
Normalmente solo guarda la identificación de la opción deseada en su base de datos, así que ... demostrémoslo
service.js
myApp.factory(''Models'', function($http) {
var models = {};
models.allModels = function(options) {
return $http.post(url_service, {options: options});
};
return models;
});
controller.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;
});
});
Finalmente, el modelo html parcial.html
Model: <select ng-model="selected_model"
ng-options="model.id_model as model.name for model in models" ></select>
básicamente quería apuntar a esa pieza " model.id_model como model.name para modelo en modelos " " model.id_model " usa la identificación del modelo para el valor para que pueda coincidir con el " mainObj.id_model " que también es el " modelo_eleccionado ", esto es solo un valor simple, también " como nombre.model " es la etiqueta del repetidor, finalmente " modelo en modelos " es solo el ciclo regular que todos conocemos.
Espero que esto ayude a alguien, y si lo hace, vote por favor: D
Si alguien se está ejecutando en el valor predeterminado de vez en cuando no está poblado en la página de Chrome, IE 10/11, Firefox: intente agregar este atributo a su campo de entrada / selección para verificar la variable poblada en el HTML, así:
<input data-ng-model="vm.x" data-ng-if="vm.x !== '''' && vm.x !== undefined && vm.x !== null" />
Si su conjunto de objetos es complejo como:
$scope.friends = [{ name: John , uuid: 1234}, {name: Joe, uuid, 5678}];
Y su modelo actual se configuró de la siguiente manera:
$scope.user.friend = {name:John, uuid: 1234};
Ayudó a usar la track by
función en uuid (o cualquier campo único), siempre que el ng-model = "user.friend" también tenga un uuid:
<select ng-model="user.friend"
ng-options="friend as friend.name for friend in friends track by friend.uuid">
</select>
Una manera más fácil de hacerlo es usar data-ng-init como este:
<select data-ng-init="somethingHere = options[0]" data-ng-model="somethingHere" data-ng-options="option.name for option in options"></select>
La principal diferencia aquí es que necesitaría incluir data-ng-model
<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>
Solo agrega la opción con el valor vacío. Funcionará.
<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>