CODEWITHSUNDEEP
javascripthtmlangularjsselected
Ivan Chepurin
Ivan Chepurin

Reputation: 131

option selected not working from AngularJS template

I'm new to AngularJS, so it could be really simple, but I just can't seem to figure it out. The problem is not in the AngularJS code itself, but I'm sure it is somehow connected, because I've tried it in a blank pure-HTML test page, and it worked, how it's supposed to.

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>

The problem here is, as the title says, with <option value="id" selected> not being selected at page load, how it's supposed to be. headers.html is, obviously, a template for data output. And it does the job perfectly, except for this selected problem.

It's loaded from 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');
    }
};
}]);

and, of course, there is this guy inside index.html:

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

Once again, everything else works as expected. The only problem is that supposed-to-be-selected option is not actually selected at page load.

Any ideas?

Upvotes: 6

Views: 16099

Answers (6)

user3738570
user3738570

Reputation: 11

Use expression in ng-selected

<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>

Upvotes: 1

Gajender Singh
Gajender Singh

Reputation: 1313

use

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

as your default

Upvotes: 0

Paulo Gabriel
Paulo Gabriel

Reputation: 57

Take a look at angularjs docs. You can use the ngSelected for this.

Example in docs:

<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>

Upvotes: 1

Ivan Chepurin
Ivan Chepurin

Reputation: 131

So I solved it by adding to headers.app

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

and replacing my <select> block with

<select ng-model="sortHeaders">
<option ng-repeat="option in sortBy"
    value="{{option}}"
    ng-selected="{{option=='id'}}">{{option | uppercase}}</option>
</select>

I didn't use ng-options bacause in my case it's a 1-d array of values and using of ng-options is not, in this case, the needed, nor the most elegant (as it seems to me), solution.

And thank you guys for the links to ng-selected, found them really useful.

Upvotes: 0

gr3g
gr3g

Reputation: 2914

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

As said in other responses, you can do it this way also: 

<select ng-model="sortHeaders">
    <option value="rating">Rating</option>
    <option value="id" ng-selected="true">ID</option>
</select>

Upvotes: 18

user1260272
user1260272

Reputation: 1

In angular you should use the ngSelected directive instead of selected, like so:

<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

Upvotes: 0

Related Questions