javascript - ejemplos - Cómo configuro el valor predeterminado de la casilla de selección en angularjs

angularjs tutorial

Question

Tengo un formulario que se utiliza para editar un objeto y no puedo seleccionar un valor en el cuadro de selección.

Tengo una matriz json que representa el que se va a editar y se ve así:

       $scope.item = [{
    "objectID": "76",
    "versionID": "0",
    "versionName": "CURRENT",
    "objectName": "xyz",
}]

ahora estoy al mismo tiempo poblando un cuadro de selección de otra matriz json que se ve así:

$scope.versions = [{
    "id": "0",
    "description": "CURRENT",
    "name": "CURRENT"
},
    {
    "id": "114",
    "description": "description of Version 2",
    "name": "version2"
},
    {
    "id": "126",
    "description": "description of Version 3",
    "name": "version3"
},
    {
    "id": "149",
    "description": "description of Version 4",
    "name": "version4"
}] 

Dentro de mi página web, estoy creando el cuadro de selección de la siguiente manera:

Version:<select ng-model="item.versionID" ng-selected="item.versionID" ng-options="version.name for version in versions" required>

el cuadro de selección está rellenando para mí, pero debería seleccionar el valor que coincida con la versión del item . He probado tanto versionID como versionID , incluso he intentado configurar ng-selected="0" y eso ni siquiera funciona.

He buscado aquí en SO, el sitio de Angularjs y busqué en Google e hice innumerables tutoriales, pero todavía tengo problemas con esto. Simplemente no puedo ver cuál es el problema, por lo que cualquier Ayuda muy apreciada

JSFiddle Added

Se agregó un JsFiddle here

Answer 1

De acuerdo con la select documentos, la siguiente pieza de código funcionó para mí.

<div ng-controller="ExampleController">
<form name="myForm">
<label for="mySelect">Make a choice:</label>
<select name="mySelect" id="mySelect"
  ng-options="option.name for option in data.availableOptions track by     option.id"
  ng-model="data.selectedOption"></select>
</form>
<hr>
<tt>option = {{data.selectedOption}}</tt><br/>
</div>

Answer 2

Después de buscar y probar varias opciones que no funcionan para que funcione mi opción predeterminada de selección. Encuentro una solución limpia en: http://www.undefinednull.com/2014/08/11/a-brief-walk-through-of-the-ng-options-in-angularjs/

<select class="ajg-stereo-fader-input-name ajg-select-left"  ng-options="option.name for option in selectOptions" ng-model="inputLeft"></select>
<select class="ajg-stereo-fader-input-name ajg-select-right" ng-options="option.name for option in selectOptions" ng-model="inputRight"></select>

 scope.inputLeft =  scope.selectOptions[0];
 scope.inputRight = scope.selectOptions[1];

Answer 3

No establece el valor predeterminado porque su modelo no está vinculado a las propiedades de identificación o nombre, está vinculado a cada objeto de version . Intente configurar el versionID de versionID en uno de los objetos y debería funcionar, es decir, $scope.item.versionID = $scope.versions[2];

Si desea establecer por la propiedad de id, entonces necesita agregar la sintaxis de select as :

ng-options="version.id as version.name for version in versions"

http://jsfiddle.net/LrhAQ/1/

Answer 4

Puedes anexar

track by version.id

a sus ng-opciones.

Answer 5

Puedes usar ng-init como este

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

Answer 6

si no quiere inicializar ng-model a un valor estático y cada valor es impulsado por DB, se puede hacer de la siguiente manera. Angular compara el valor evaluado y rellena el menú desplegable.

Aquí debajo de modelData.unitId se recupera de DB y se compara con la lista de id de unidad que es una lista separada de db-

 <select id="uomList" ng-init="modelData.unitId"
                         ng-model="modelData.unitId" ng-options="unitOfMeasurement.id as unitOfMeasurement.unitName for unitOfMeasurement in unitOfMeasurements">

Answer 7

  <select ng-model="selectedCar" ><option ng-repeat="car in cars "  value="{{car.model}}">{{car.model}}</option></select>
<script>var app = angular.module(''myApp'', []);app.controller(''myCtrl'', function($scope) { $scope.cars = [{model : "Ford Mustang", color : "red"}, {model : "Fiat 500", color : "white"},{model : "Volvo XC90", color : "black"}];
$scope.selectedCar=$scope.cars[0].model ;});