funciones funciona example ejemplos ejemplo cómo bootstrap angularjs

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

http://plnkr.co/edit/HrT5vUMJOtP9esGngbIV


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

DEMO Plnkr


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