All geek questions in one place

How to choose the first default option in the selection box or drop-down list

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

I like it

<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;
        })
      })

Is it possible to load data before calling the controller and loading the html file with permission?

+4
source share
5 answers

Can we upload data to the calling controller and upload the html file using the solution?

. - , , , .

;

  • - # .
  • ngRoute # .
  • DOM, .

Ui- #

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

, ( ng-controller root ).

ngRoute #

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

, ui-router.

ngIf

, , .

.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

0

, vm.data . ng-init, vm.data [0] - undefined, . , ng-if="vm.data" div , ng-if dom vm.data.

, . ng-init - - , .

0

. , angular HTML $scope.

http://plnkr.co/edit/dVI0MDC5k4AVSJAOMyy3?p=preview

, , , init

controller('f',function($http, $scope){
    $scope.vm = null;
    $scope.userselected = null;
    $http.get('data.json').success(function(data){
      $scope.vm=data;
      $scope.userselected = $scope.vm[0];
    })
  })

HTML:

    <select ng-model="userselected"
            ng-options="option.name for option in vm">
    </select>
0

, .

: ng-model

HTML:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-select-with-default-values-production</title>  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
  <script src="app.js"></script>

</head>
<body ng-app="defaultValueSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="mySelect">Make a choice:</label>
    <select name="mySelect" id="mySelect"
      ng-options="option.name for option in data.availableOptions track by option.id"
      ng-model="data.selectedOption"></select>
  </form>
  <hr>
  <tt>option = {{data.selectedOption}}</tt><br/>
</div>
</body>
</html>

JS:

(function(angular) {
  'use strict';
angular.module('defaultValueSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = {
     availableOptions: [
       {id: '1', name: 'Option A'},
       {id: '2', name: 'Option B'},
       {id: '3', name: 'Option C'}
     ],
     selectedOption: {id: '3', name: 'Option C'} //This sets the default value of the select in the ui
     };
 }]);
})(window.angular);

: select ngOptions

0

 ng-init="userselected = vm.data[0]"

init login.html

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

-

 .controller('f',function($http,$scope){  // add $scope as a DI
    var l=this;
    $http.get('data.json').success(function(data){
      l.data=data;
      $scope.userselected = l.data[0];  // initalize or select first option
    })
  })

!

0

Source: https://habr.com/ru/post/1621066/

More articles:


All Articles