Sélectionnez une option dans un menu déroulant par sa valeur - AngularJS

Question

J'ai une usine qui tire des options déroulantes à partir d'une base de données:

app.factory('populateDDL', function($http) { 
    'use strict'; 
    return function (tbl,key) { 
     var json, 
      data = JSON.stringify({ 
       sKey: key, 
       sTableName: tbl 
      }); 
     return $http.post('util.asmx/populateDDL',data). 
     then(function(response) { 
      return JSON.parse(response.data.d); 
     }); 
    }; 
}); 

Je demande alors que les données à une liste déroulante/sélectionner dans mon contrôleur:

app.controller('userSettings', function($scope, $http, populateDDL) { 
      $scope.clinicLocations = new populateDDL('locations',key). 
      then(function(response) { 
       console.log(response); 
       $scope.clinicsDDL = response.locations; 
       $http({ 
        url: 'util.asmx/returnUser', 
        method: 'POST', 
        data: {sUserId: uid}, 
       }) 
       .success(function(user) { 
        $scope.user = user.d; 
       }) 
       .error(function(data, status, headers, config) { 
        console.log(data+', '+status+', '+headers+', '+config); 
       }); 
      }); 
     }); 

Voici comment la balise select ressemble:

<select ng-model="clinicsDDL.item" ng-options="item.name for item in clinicsDDL track by item.id" ngRequired /> 

la liste déroulante des données de la liste qui est mise en $ scope.clinicsDDL ressemble à ceci:

[{ 
    "id": "19", 
    "name": "other clinic" 
}, { 
    "id": "39", 
    "name": "My clinic" 
}] 

Les données utilisateur renvoyés de la DB ressemble à ceci:

{ 
    "__type": "User", 
    "FirstName": "Erik", 
    "LastName": "Grosskurth", 
    "DefaultLocationId": "39" 
} 

intérieur de mon contrôleur je remplir la liste déroulante/select puis je prends un ID utilisateur et le soumettre à la base de données pour les informations utilisateur. Cette information de l'utilisateur revient. A partir de là, je veux sélectionner une option spécifique de la liste précédemment remplie en fonction de ce que "DefaultLocationId" est retourné par la base de données.

Comment ferais-je cela?

$scope.clinicsDDL.item = $scope.clinicsDDL[0]; 

^^^ ne fonctionne pas parce que je ne peux pas compter sur le tableau pour toujours être formé le même. Je dois cibler l'élément de tableau basé sur "DefaultLocationId" et non un entier.

Dans jQuery, vous devez cibler le sélecteur en utilisant $ ('# clinicsDDL option [value = "19"'). DoSomething();

je pensais que ce serait comme ça dans quelque chose angulaire comme ceci:

$scope.clinicsDDL.item = $scope.clinicsDDL[value="19"]; 

^^^ mais cela ne fonctionne pas non plus

Answer 1

La présélection utilise des références uniquement. Lorsque vous voulez sélectionner un élément et que vous ne savez pas quel champ le contient, vous devez le rechercher. Au lieu d'utiliser Array.filter(), vous devez utiliser la fonction de recherche de lodash (https://lodash.com/docs#find)

//preselect DefaultLocationId 39 
$scope.clinicsDDL.item = _.find($scope.clinicsDDL, {DefaultLocationId : 39}); 

de _.find (...) retournera non défini quand aucun élément n'a pu être trouvée. Ainsi, vous pouvez laisser indéfinies ou utiliser une valeur par défaut comme

$scope.clinicsDDL.item = _.find($scope.clinicsDDL, {DefaultLocationId : 39}) || $scope.clinicsDDL[0];