How to select first option by default in select box or drop down

user944513

I am trying to display select box using directive. But my default option is not display.

I do like this

<div>
    <select ng-init="userselected = vm.data[0]"
            ng-model="userselected"
            ng-options="option.name for option in vm.data">
    </select>
</div>

Here is my code http://plnkr.co/edit/Q1e8u0okOa4looLcb2YO?p=preview

.controller('f',function($http){
        var l=this;
        $http.get('data.json').success(function(data){
          l.data=data;
        })
      })

Can we load data before calling controller and loading the html file using resolve?

Kasper Lewau

Can we load data before calling controller and loading the html file using resolve?

Yes. The way to do that would be to resolve the dataset you want to expose onto your view before initialising the controller attached to said portion of the view.

I can think of three ways off of the top of my head;

  • ui-router#resolve.
  • ngRoute#resolve.
  • defer compilation of the DOM attached to your controller.

ui-router#resolve

// state definition
.state('myState', function () {
  resolve: {
    dataset: function (Service) {
      return Service.getData();
    }
  },
  controller: 'Controller'
})
// controller definition
.controller('Controller', function (dataset) {
  this.dataset = dataset;
})

The resolved data will be available under the given name in the controller attached to the state definition (through the definition itself, or with a ng-controller at the root of your state template).

ngRoute#resolve

// route definition
.when('/path', {
  resolve: {
    dataset: function (Service) {
      return Service.getData();
    }
  },
  controller: 'Controller'
})
// controller definition
.controller('Controller', function (dataset) {
  this.dataset = dataset;
})

Pretty much the exact same way as the ui-router example.

ngIf

Defer the rendering of your template, by waiting for the promise to resolve.

.controller('outer', function ($timeout) {
  this.resolved = false;
  this.dataset  = [];

  $timeout(function () {
    this.resolved = true;
    this.dataset = [ {}, {} ];
  }.bind(this), 1500);
})
.controller('inner', function () {
  console.log('I just ran!');
})

<div ng-controller="outer as o">
  <div ng-controller="inner as i" ng-if="o.resolved">
    {{o.dataset}}
  </div>
</div>

jsfiddle of the last solution

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

automatically position to an option in a drop down select box

From Dev

How to disable first option in Drop down select menu?

From Dev

How to Set Height for the Drop Down of Select box

From Java

How to select option in drop down using Capybara

From Dev

How to select drop down option in Selenium webdriver?

From Dev

how to select default value drop down menu

From Dev

Populate second <select> drop down based on the first <select> drop down option

From Dev

how to show a textbox if I select a certain option in drop down box in php prep statement?

From Dev

select drop down on change reload reverts to first option

From Dev

How can I set a select default value from a drop-down box in AngularJS?

From Dev

How can I set a select default value from a drop-down box in AngularJS?

From Dev

How can I hide default <select> <option> when the drop-down is clicked?

From Dev

How to implement Drop Down Box that loads element on select?

From Dev

How to populate grails gsp select(drop down box) field?

From Dev

How to add 'SELECT' option in drop down list struts 2

From Dev

How to update Select Option drop down menu with jQuery?

From Dev

Couting how many times each option is selected in Select drop down

From Dev

How to auto select a drop-down option using angular

From Dev

How to select a drop down option based on text of a variable in python and selenium

From Dev

How can I programatically select a drop down option using Ember?

From Dev

How to add disable option or default option in select box?

From Dev

AngularJS: Set default select option when using directive to apply select drop down to page

From Dev

Select box with first option empty

From Dev

Filter Category Select Drop down based on Another drop down option

From Dev

How to use VBA to select the first iterm in a drop down list in Excel

From Dev

Change option in select drop down using javascript

From Dev

Fix width of drop down menu in select option

From Dev

JQuery Drop Down List select option by text

From Dev

How to disable all option second select box that can be less than to first select box selected option?

Related Related

  1. 1

    automatically position to an option in a drop down select box

  2. 2

    How to disable first option in Drop down select menu?

  3. 3

    How to Set Height for the Drop Down of Select box

  4. 4

    How to select option in drop down using Capybara

  5. 5

    How to select drop down option in Selenium webdriver?

  6. 6

    how to select default value drop down menu

  7. 7

    Populate second <select> drop down based on the first <select> drop down option

  8. 8

    how to show a textbox if I select a certain option in drop down box in php prep statement?

  9. 9

    select drop down on change reload reverts to first option

  10. 10

    How can I set a select default value from a drop-down box in AngularJS?

  11. 11

    How can I set a select default value from a drop-down box in AngularJS?

  12. 12

    How can I hide default <select> <option> when the drop-down is clicked?

  13. 13

    How to implement Drop Down Box that loads element on select?

  14. 14

    How to populate grails gsp select(drop down box) field?

  15. 15

    How to add 'SELECT' option in drop down list struts 2

  16. 16

    How to update Select Option drop down menu with jQuery?

  17. 17

    Couting how many times each option is selected in Select drop down

  18. 18

    How to auto select a drop-down option using angular

  19. 19

    How to select a drop down option based on text of a variable in python and selenium

  20. 20

    How can I programatically select a drop down option using Ember?

  21. 21

    How to add disable option or default option in select box?

  22. 22

    AngularJS: Set default select option when using directive to apply select drop down to page

  23. 23

    Select box with first option empty

  24. 24

    Filter Category Select Drop down based on Another drop down option

  25. 25

    How to use VBA to select the first iterm in a drop down list in Excel

  26. 26

    Change option in select drop down using javascript

  27. 27

    Fix width of drop down menu in select option

  28. 28

    JQuery Drop Down List select option by text

  29. 29

    How to disable all option second select box that can be less than to first select box selected option?

HotTag

Archive