l'option sélectionnée ne fonctionne pas à partir d'AngularJS modèle

Je suis nouveau sur AngularJS, de sorte qu'il peut être vraiment simple, mais je n'arrive pas à le comprendre. Le problème n'est pas dans le AngularJS code lui-même, mais je suis sûr que c'est en quelque sorte lié, parce que je l'ai essayé dans un blanc pur HTML de la page de test, et il a travaillé, comment il est censé.

headers.html:

<table>
<thead>
    <tr>
        <td colspan="2" align="right">
            Sort headers by:
            <select ng-model="sortHeaders">
                <option value="rating">Rating</option>
                <option value="id" selected>ID</option>
            </select>
        </td>
    </tr>
    <tr>
        <th>Rating</th>
        <th>Header</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="header in headers | filter:search | orderBy:sortHeaders">
        <td>{{header.rating}}</td>
        <td>{{header.title}}</td>
    </tr>
</tbody>

Le problème ici est, comme le dit le titre, avec <option value="id" selected> pas être sélectionné au chargement de la page, la façon dont il est censé être.
headers.html est, évidemment, un modèle de sortie de données. Et il fait le travail parfaitement, sauf pour ce selected problème.

Il est chargé de la headers_app.js:

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

headersApp.directive('headers', [function () {
return {
    restrict: 'E',
    controller: function($scope, $http) {
        $http.get('/api/headers.json').success(function(data) {
            $scope.headers = data.headers;
        });
    },
    templateUrl: '/templates/headers.html',
    replace: true,
    link: function (scope, element, attrs) {
        console.log('linked headersApp');
    }
};
}]);

et, bien sûr, il y a ce gars à l'intérieur de index.html:

...
<headers>
</headers>
...

Une fois de plus, tout le reste fonctionne comme prévu. Le seul problème est que supposé être sélectionné à l'option n'est pas sélectionnée au chargement de la page.

Des idées?

InformationsquelleAutor Ivan Chepurin | 2015-07-14

15
```
 link: function (scope, element, attrs) {
       scope.sortHeaders  = "id";
    }
```
Comme dit dans d'autres réponses, vous pouvez le faire de cette façon également:
```
<select ng-model="sortHeaders">
    <option value="rating">Rating</option>
    <option value="id" ng-selected="true">ID</option>
</select>
```
- Oui, merci, ça le fait. Mais tout de même. Aucune idée de pourquoi ça ne fonctionne pas avec "sélectionné" attribut?
- Pouvez-vous vérifier les DOM voir si selected il est encore là? Angulaire pourrait lancer loin, parce qu'il va sélectionnez l'option qui correspond au modèle dans la sélection
- merci, même si je l'ai résolu un peu différemment dans la fin, je pense que votre réponse est la meilleure solution pour la façon dont je l'ai écrit en premier lieu.
- ng-selected="true" il l'a fait pour moi, merci!
InformationsquelleAutor gr3g
1

Prendre un coup d'oeil à angularjs docs. Vous pouvez utiliser le ngSelected pour cela.

Exemple dans les docs:

HTML:
```
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<label>Check me to select: <input type="checkbox" ng-model="selected"></label>
<br/>
<select aria-label="ngSelected demo">
  <option>Hello!</option>
  <option id="greet" ng-selected="selected">Greetings!</option>
</select>
```
- Salut Paulo, même si les liens sont utiles, il est préférable de répondre à de telle manière que le lecteur n'a pas à suivre un lien. Veuillez modifier votre réponse à contenir un résumé, les points essentiels à partir du lien?
- Salut, Ivan! Merci pour votre suggestion. La prochaine fois, je vais prendre soin de mes réponses. Je suis un débutant dans la Stackoverflow. 🙁
InformationsquelleAutor Paulo Gabriel

L'utilisation de l'expression en ng-sélectionné

<OPTION ng-selected="expression">
  ...
</OPTION>

<select ng-model="selectedid">
<option value="" disabled selected>Seleccione...</option>
   <option ng-repeat="item in list" 
   ng-selected="{{item.Value}} === {{selectedid}}" 
   value="{{item.Value}}">{{item.Text}}  
</option>
</select>

InformationsquelleAutor user3738570

0

Angulaire vous devez utiliser le ngSelected directive à la place de certains, comme suit:
```
<select ng-model="sortHeaders">
    <option value="rating">Rating</option>
    <option value="id" ng-selected="selected">ID</option>
</select>
```
https://docs.angularjs.org/api/ng/directive/ngSelected
- ne fonctionne pas pour une raison quelconque. même résultat qu'avec selected
InformationsquelleAutor user1260272
0

Donc je l'ai résolu en ajoutant à en-têtes.app
```
$scope.sortBy = ['id','rating'];
```
et le remplacement de mon <select> bloc avec
```
<select ng-model="sortHeaders">
<option ng-repeat="option in sortBy"
    value="{{option}}"
    ng-selected="{{option=='id'}}">{{option | uppercase}}</option>
</select>
```
Je n'ai pas utilisé ng-options car dans mon cas c'est un 1-d tableau de valeurs et à l'aide de ng-options n'est pas, dans ce cas, le besoin, ni le plus élégant (comme il me semble), solution.

Et merci les gars pour les liens vers ng-selected, vraiment utile.

InformationsquelleAutor Ivan Chepurin
0

utilisation
```
<option  ng-selected="true">Select Event Name</option>
```
en tant que par défaut de votre

InformationsquelleAutor Gajender Singh

Vous devez vous connecter pour publier un commentaire.