CODEWITHSUNDEEP
javascriptangularjs
Defus
Defus

Reputation: 829

blank option in select fields

I want to fill my option fields by data from database. I am getting error in console:

Error: [$compile:ctreq] Controller 'select', required by directive 'ngOptions', can't be found!

I know that Json send my data properly cause I see output when I did smth like that: myaddress.com/forms/usersDB.php?action=get_Logins_info

Output:

[{"id":"1","name":"John"},{"id":"2","name":"Julia"}]

Angular Function:

$scope.ChooseLogins = [];
$scope.getLogins = function () {
    $http.get('forms/usersDB.php?action=get_Logins_info').then(function (data, status, headers, config) {
        $scope.chooseLogins = data;
        console.log('Retrieved data from server');
        console.log(data);
    }).then(function (data, status, headers, config) {
        console.log("Error in retrieving data from server");
        console.log(data, status);
    });
};
$scope.getLogins();

HTML:

<md-select ng-model="getLogins" ng-options="logins.id for logins in chooseLogins">
    <md-option value="{{logins.id}}">{{logins.name}}</md-option>
</md-select>

Upvotes: 0

Views: 111

Answers (2)

George
George

Reputation: 6739

As stated in the comment, you cannot use ng-options on any other element except <select> which <md-select> isn't, what's recommended and in the documentation is to use an ng-repeat on the <md-options>. Example

<md-select ng-model="login">
    <md-option ng-repeat="logins in chooseLogins" ng-value="logins.id">{{logins.name}}</md-option>
</md-select>

To make it so that you don't have an empty option, you need to set the model to equal the first id in the array. Also note you have your model the same name as your function, you'll need to change this.

Here is a Fiddle to show you how to do it.

For your code change it to this

$scope.getLogins = function () {
    $http.get('forms/usersDB.php?action=get_Logins_info').then(function (response, status, headers, config) {
        $scope.chooseLogins = response.data;
        $scope.login = $scope.chooseLogins[0].id;
        console.log('Retrieved data from server');
        console.log(data);
    }).then(function (data, status, headers, config) {
        console.log("Error in retrieving data from server");
        console.log(data, status);
    });
};

As an extra you may want to check the length of the data returned before setting it.

Upvotes: 2

Manikandan Velayutham
Manikandan Velayutham

Reputation: 2228

Use ng-repeat.


<!DOCTYPE html>
<html>

  <head>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.min.css" />
    
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
    <link rel="stylesheet" href="style.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-messages.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.js"></script>
    <script>
    (function () {
  'use strict';

    angular
      .module('MyApp', ['ngMaterial'])
    .controller('AppCtrl', function($interval, $mdDialog) {
      var vm = this;        
vm.chooseLogins = [{"id":"1","name":"John"},{"id":"2","name":"Julia"}];
    });

})();
</script>
  </head>

  <body>
    <div ng-controller="AppCtrl as ctrl" 
        ng-app="MyApp"
        >
      
     
     <p>{{ctrl.chooseLogins}}</p><br>
      <md-input-container>
        <label>Choose name...</label>
      <md-select ng-model="getLogins">
    <md-option ng-repeat="logins in ctrl.chooseLogins" ng-value="logins.id">{{logins.name}}</md-option>
</md-select>
</md-input-container>
<p>{{getLogins}}</p>
    </div>
    
    
  </body>
  

</html>

Upvotes: 0

Related Questions