Je travaille avec ng Options pour afficher un élément de sélection et je souhaite connecter le modèle à la valeur définie comme valeur dans ng Options.

var app = angular.module('test', []);

app.controller('TestCtrl', ['$scope',
  function ($scope) {
    //Use random to simulate different data from an API
    $scope.default = Math.floor(Math.random()*3);
    $scope.options = [
      {
        id: 0,
        name: "Option 1"
      },
      {
        id: 1,
        name: "Option 2"
      },
      {
        id: 2,
        name: "Option 3"
      }
    ];
  }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
  <div ng-controller="TestCtrl">
    <select ng-model="default" ng-options="val.name for val in options track by val.id">
    </select>
    <pre>Default should be ID {{default}}, or Option {{default+1}}
  </div>
</div>

J'ai essayé d'utiliser track by, select as, et j'ai trouvé deux solutions qui fonctionnent, mais qui ne sont pas idéales.

Idéalement, je serais capable de définir la valeur par défaut

Solution 1:

// Loop through entire array of objects
$scope.options.forEach(function (v, k) {
  // Compare ID to what the default should be
  if (v.id === $scope.default) {
    // Set object to default
    $scope.default = v;
    return true;
  }
});

Solution 2:

JS

$scope.options = {
  "Option 1": 0,
  "Option 2": 1,
  "Option 3": 2
};

HTML

<select ng-model="default" ng-options="value as key for (key, val) in options">

Le problème avec cette solution est qu'elle ne fonctionne que si l'objet n'a pas plus de deux valeurs, car une clé ne peut pas être un objet.

Existe-t-il un moyen pour Angular de définir une valeur par défaut par clé, sans avoir à inclure l'objet entier?

0
Brandon Anzaldi 15 juil. 2015 à 05:26

2 réponses

Meilleure réponse

Essayez comme ça

<select ng-options="item.id as item.name for item in options" ng-model="selected"></select>

Puis dans le contrôleur

$scope.selected = 1;

exemple de plunker similaire

1
atinder 15 juil. 2015 à 03:34
var app = angular.module('test', []);

app.controller('TestCtrl', ['$scope',
  function ($scope) {
    //Use random to simulate different data from an API
    
    $scope.options = [
      {
        id: 0,
        name: "Option 1"
      },
      {
        id: 1,
        name: "Option 2"
      },
      {
        id: 2,
        name: "Option 3"
      }
    ];
$scope.default = $scope.options[Math.floor(Math.random()*3)];
  }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
  <div ng-controller="TestCtrl">
    <select ng-model="default" ng-options="val.name for val in options">
    </select>
    <pre>Default should be ID {{default.id}}, or Option {{default.id+1}}
  </div>
</div>
1
Suresh Sagi 15 juil. 2015 à 03:13