Afficher l'étiquette affichée dans les options comme titre de la sélection

vous devez faire l'événement ng-change dans votre select et appeler une fonction qui change la valeur du texte de l'étiquette en nom de valeur de sélection. quelque chose comme ci-dessous En Html

$scope.changedValue = function(item) {
    //change label name here
  } 

En JS

ng-change="changedValue(detail.BrandId)"

remplissez ng-model par "option" et non "option.BrandId"

alors vous pouvez définir le titre comme ceci:

mainCtrl.products ['ng-model-name']. Brand.Name

Voici comment réaliser ceci:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="app.AppCtrl">
	<select title="{{selectedOption.label}}" class="form-control" ng-model="selectedOption">
		<option ng-repeat="option in optionList" ng-value="option"> {{option.label}}</option>
	</select>
</div>

body {
  margin: 20px;
}

(function () {
	"use strict";
	const app = angular.module("app", []);
  
	app.controller("app.AppCtrl", $scope => {
    $scope.selectedOption = null;
    $scope.optionList = [{_id: 1, label: 'Option 1'}, {_id: 2, label: 'Option 2'}];
  });
  
})();

Essayez d'utiliser ng-init ,

ajoutez ng-init à votre balise de sélection et indiquez la valeur d'index d'objet que vous souhaitez sélectionner par défaut. p>

par exemple Votre code

<select ng-model="detail.BrandId"  ng-init="detail.BrandId = option[0].Brand.Name" title="" class="form-control" disabled>
        <option ng-repeat="option in mainCtrl.products" ng-selected="option.Id === detail.ProductId" ng-value="option.BrandId">{{option.Brand.Name}}</option>
</select>

ajout du code suivant (Supposons que je veuille l'index 0 par index):

ng-init="detail.BrandId = option[0].Brand.Name"

Cela ressemblera à ceci :

<select ng-model="detail.BrandId" title="" class="form-control" disabled>
    <option ng-repeat="option in mainCtrl.products" ng-selected="option.Id === detail.ProductId" ng-value="option.BrandId">{{option.Brand.Name}}</option>
</select>

ou Vérifiez ces threads

comment utiliser ng-option pour définir la valeur par défaut de l'élément select

Comment définir la valeur par défaut dans ng-options

Vous pouvez enregistrer l'objet option sélectionné dans la portée parent ng-repeat en utilisant comme expression-alias fournie par ng-repeat. Dans votre cas, il vous suffit de faire quelque chose comme ça:

angular.module("app").filter('selectedProductFilter',
    function () {
        return function (input, id) {
            if (!input) return "";
            let occurence = input.filter(function (x) {
                return x.Id == id;
            });
            return occurence.length > 0 ? occurence[0].Brand.Name: "";
        }
    }
);

L'objet options sera disponible dans la fermeture de votre contrôleur et vous pouvez afficher le titre en utilisant un filtre personnalisé.

XXX

AngularJS et select-options

Essayez d'utiliser ng-options Directive AngularJS ngOptions dans l'élément select lui-même. Ensuite, vous n'avez pas besoin d'ajouter chaque élément option vous-même en utilisant ng-repeat.

Clarification

Le title -attribute appartient à l'élément select et s'affichera si vous survolez le select. Vous souhaitez que le titre révèle l ' option actuellement sélectionnée ? Vous ai-je bien compris?

Comment afficher option.Brand.Name comme titre du champ select

Curieux, d'où vient ce detail.ProductId ? La marque est-elle présélectionnée par product-id (voir votre code)?

ng-selected = "option.Id === detail.ProductId"

Espace solution

Vos exigences / restrictions sont:

• sans utiliser JavaScript (peut-être parce que vous ne pouvez pas modifier les sources)
• sans changer le ng-model (car vous n'avez besoin que du BrandId pour certaines raisons de base de données)

Donc, comme le titre de l'élément select n'a pas accès aux options à l'intérieur, le seul moyen de le définir est en fonction de la sélection actuelle, c'est-à-dire de votre détail .BrandId . Ainsi, le title ne peut être défini dynamiquement (en fonction de la sélection actuelle) qu'en utilisant les moyens standard-angularJS, comme:

• {{expression}} expressions
• {{expression | filter}} array-filter

Comportement attendu

La seule variable de portée modifiée par sélection est spécifiée dans le ng-model de select en tant que detail.BrandId . Cela sera défini lorsque l'utilisateur sélectionne une option pour sa propriété BrandId . Lorsque l'utilisateur sélectionne entre les options, elles seront visibles avec le BrandName comme étiquette. Après la sélection, ce BrandName (étiquette de l'option) doit être affiché comme titre de tout l'élément de sélection.

Nous devons donc obtenir de detail.BrandId ( sélectionné ng-model) aux options associées BrandName (comme cela doit apparaître comme titre).

Solution possible

Le seul moyen est d'utiliser des expressions angulaires / filtres / indexation de tableau standard pour obtenir toute l'option par le detail.BrandId (ng-model)

Ensuite, nous pouvons rechercher option.BrandName par cette équation après avoir sélectionné detail.BrandId === option.BrandId code >

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<!DOCTYPE html>
<html>
  <body data-ng-app="app" data-ng-controller="mainCtrl">
      <table border="1">
        <tr>
	  <th>Product Id</th><th>Product Name</th><th>Choose Brand</th><th>Brand Id</th>
        </tr>
        <tr>
          <td>{{detail.ProductId}}</td>
          <td>{{ (products | filter: {Id: detail.ProductId})[0].name }}</td>
          <td>
            <select class="form-control"
             ng-model="detail.BrandId" 
             ng-init="detail.BrandId = (products | filter: {Id: detail.ProductId})[0].brandId"
             ng-options="o.brandId as ('['+ o.Id +'] '+ o.name +' : '+ o.brandName  +' ('+ o.brandId +')') for o in products"
             title="{{ (products | filter: {brandId: detail.BrandId})[0].brandName}}"
            >
              <!-- default option when not preset by detail.ProductId-->
              <option value="">-- please choose brand --</option>
            </select>
        </td>
        <td>{{detail.BrandId}}</td>
      </tr>
    </table>

    <hr/>
      <p>Product is predefined. So the brand is pre-selected by product. BUT: after brand is selected, the product-details do NOT change!</p>
    Selected <strong>detail</strong>:
      <pre ng-model="selected">{{detail | json}}</pre>
   </body>
</html>

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

app.controller('mainCtrl', function($scope){
  $scope.products = [
    {Id: 0, name: 'Watson', brandId: 1, brandName:"IBM"},
    {Id: 1, name: 'DB2', brandId: 1, brandName:"IBM"},
    {Id: 2, name: 'Windows', brandId: 2, brandName: "Microsoft"},
    {Id: 3, name: 'Office', brandId: 2, brandName: "Microsoft"}
  ];
  $scope.detail = { ProductId: 3, BrandId: null };
});

Voir aussi

Pour utiliser ng-options , voir aussi exemple plunkr .