Je suis nouveau sur AngularJS, donc cela pourrait être vraiment simple, mais je n'arrive pas à le comprendre. Le problème n'est pas dans le code AngularJS lui-même, mais je suis sûr qu'il est en quelque sorte connecté, car je l'ai essayé dans une page de test HTML pur, et cela a fonctionné, comme il est censé le faire.

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> non sélectionné au chargement de la page, comment il est censé être. headers.html est, évidemment, un modèle de sortie de données. Et il fait parfaitement l'affaire, à l'exception de ce problème selected.

Il est chargé à partir de 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 type dans index.html:

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

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

Des idées?

5
Ivan Chepurin 14 juil. 2015 à 16:36

6 réponses

Meilleure réponse
 link: function (scope, element, attrs) {
       scope.sortHeaders  = "id";
    }

Comme indiqué dans d'autres réponses, vous pouvez également procéder de cette manière:

<select ng-model="sortHeaders">
    <option value="rating">Rating</option>
    <option value="id" ng-selected="true">ID</option>
</select>
15
gr3g 14 juil. 2015 à 14:17

Utilisation

<option  ng-selected="true">Select Event Name</option>

Par défaut

0
Gajender Singh 21 nov. 2016 à 07:55

Je l'ai donc résolu en ajoutant à headers.app

$scope.sortBy = ['id','rating'];

Et remplacer mon bloc <select> par

<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 bacause dans mon cas, c'est un tableau de valeurs 1-d et l'utilisation de ng-options n'est pas, dans ce cas, le nécessaire, ni le plus élégant (comme il me semble ), Solution.

Et merci les gars pour les liens vers ng-selected, je les ai trouvés vraiment utiles.

0
Ivan Chepurin 14 juil. 2015 à 14:22

En angulaire, vous devez utiliser la directive ngSelected au lieu de sélectionnée, comme ceci:

<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

0
user1260272 14 juil. 2015 à 13:49

Utiliser l'expression dans 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>  
1
user3738570 16 janv. 2017 à 20:47

Jetez un œil aux documents angularjs. Pour cela, vous pouvez utiliser le ngSelected.

Exemple dans les documents:

<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>
1
Paulo Gabriel 14 juil. 2015 à 16:37